Assessment wanted for responsive design and media queries test

MDN Learn
1

Hi! :wave:
I would appreciate if I could have an assessment for my work on responsive design and media queries test.

I have one question.
I initially tried to style the header (align the <div> to the left and the <nav> to the right) with flexbox as below… But it didn’t work. :cry:
Is it not possible to use flexbox to align one of the flex items to the right and the rest of them to the left?

    header {
      display: flex;
    }

    nav {
      justify-self: flex-end;
    }

I ended up using grid to do this and the result seems similar enough to the example, but I would appreciate if you could kindly check if I did it correctly.

Thank you in advance! :blush:

My work

Test page

2

Hi @Rosa

In flexbox, the justify-self property is ignored.

You could still have used flex instead of grid if you prefered by:

header {display: flex; justify-content: space-between; }

then you could further style the nav as needed.

Your grid method works too. This all looks correct.

2 Likes
3

Thank you so much! :slight_smile:

1 Like