Assessment wanted for Fundamental Layout Comprehension-haydee

task page

my work page

I have a small question:
in the example image, I find that there is little space at the left of “home” or at the right of “contacts”. So I decided to use the display:block and change the nav li a to a block one and set the padding to 0, however it seems that the horizontal paddings is NOT 0

Hi @Austin_Hart

Sorry for the long waiting time. I will have a look a this exercise soon.
We haven’t forgotten about it. :slightly_smiling_face:

Michael

1 Like

Hello @Austin_Hart

sorry for late replay and you doing great well done let us dive into it little bit

  1. grid-gap and gap are the same https://developer.mozilla.org/en-US/docs/Web/CSS/gap
    so you can remove one of those
grid-gap:1px;
gap:1px;
  1. now for the list item
    the issue with all of those
flex:1;
padding-left:0;  \\ no need as the default value for padding is 0 
padding-left:0; \\ no need for that also despite you ment to use padding-right i guess typo here

the main issue that you use flex:1 which mean flex-grow:1
check this for extra details https://developer.mozilla.org/en-US/docs/Web/CSS/flex about flex

also if you read the provided css you will notice

nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }

with set the padding for the a element but when you use this

nav li a {
  display:block;
  padding:0;
}

you removed the padding again that why the little padding is gone

the display :block you used was good to handle the issue when you try to resize the window of your browser to smaller size which i used also when i solved this task

so to summarize point 2
a) remove those

flex:1;
padding-left:0;
padding-left:0;

from selector nav a
b) remove this also padding:0; from the selector nav li a

and it was nice to see you split your own code from the provided code with this comment /* my work starts here */ which help a lot to know which part to debug thanks for that

plus what @mikoMK said you will not walk alone in this community and have a nice day both of you :slight_smile:

2 Likes

I removed flex:1; and that really solved the problem. thanks :grin:

2 Likes