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.
Michael
Hello @Austin_Hart
sorry for late replay and you doing great well done let us dive into it little bit
- 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;
- 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
I removed flex:1;
and that really solved the problem. thanks