Why does my ul go slightly left of my nav?

1

I’m creating a navigation bar and I’ve nested a nav inside my header. I’ve got a ul inside this and I want to add a background colour to my ul but it looks rather ugly as the ul extends outside the left edge of the nav. I’ve tried a few things such as setting the margin and padding as 0 for both ul and li items in CSS but none of this works.

Could somebody please explain to me why I’m having this problem and how to fix it? Does it have to do with bootstrap default properties?

2

Update: it seems to work when I change the header padding to 5px, not sure why though, could someone please explain why? Any and all help appreciated.

3

Looks like you fixed that already. Good job!

4

If you could create another pen showing the issue, I could probably tell you why. Can’t right now as you solved it already in the current pen.