Assessment wanted for fundamental CSS layout test

Hi :wave:

I would appreciate if I could have an assessment of my work on fundamental css layout test.

I have two questions:

  1. To distribute nav menu evenly, instead of justify-content: space-between, how about this?

       nav ul {
         display: flex;
       }
    
       nav ul li {
        flex: 1;
         text-align: center;
       }
    
  2. In the approach above, in order to centre each navigation menu’s text, I added a rule
    nav ul li { text-align: center; }
    because I realised that there was a user agent style rule
    li {text-align: -weblit-match-parent}.
    Was my solution correct? Is there a better way to do this?

Thank you in advance! :blush:

My work:

Test page:

Hi @Risa

Your solution gets close to the finished layout, however, you can get closer by using the following in your .grid rule instead:

grid-template-columns: 3fr 1fr;

so that more space is given to the <article> . This has also affected the styling of your aside photos.

As for your question 1:

nav ul li { flex: 1; text-align: center; }

Will make your nav look as if it had justify-content: space-around instead of space-between in the ul rule.

Well done on this.

2 Likes

Thank you! :slight_smile:

I somehow didn’t realise the ratio of article and aside, but now I see it!
Also I agree I could have just done centring nav menu by justify-content: space-around.