I am trying to make my nav bar have equal padding both left and right but I can’t seem to make it work.
I’ve tried changing the value of the left padding but to no avail. I’ve also tried to come up with a solution through the dev-tool but that doesn’t make me any brighter.
In your html selector in CSS, you have added a value of “auto” padding to the left and right. That gives some added space to the left and right of the elements inside your html.
Try removing that padding and see if it fixes the position of your nav.
It all comes to where that extra padding was coming from.
The “auto” padding in the html selector doesn’t give you any padding at all on the left and right sides, because “auto” is not accepted as a value for padding, and that’s where my mistake was. So, writing padding: 0 auto; is basically the same as writing padding: 0;.
That extra padding that created the problem, was actually the automatic indentation that comes with the unordered list. By setting the padding inside the ul selector to 0, we removed specifically that automatic indentation and set the internal <li> elements to start exactly where the <ul> starts.
Here’s an image that I hope it makes what I wrote a little bit more clear: