CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bubinga
Bubinga

Reputation: 703

Navbar longer than rest of page, resulting in whitespace

I have a website that is meant to contain a full page image and a navbar at the top. At the very beginning of my project when I encountered the current issue where a white space appears to the right of my image, I simply set overflow-x: hidden. However, now I do not have that option and must deal get rid of it properly. I have created a CodePen that recreates the problem. I have no clue what is causing the issue, any help would be really appreciated.

This post is sorta similar to this one, but I'm keeping it because I think others with the same problem as I had might be able to find it easier.

Upvotes: 0

Views: 90

Answers (1)

Cocobolo
Cocobolo

Reputation: 26

Your issue isn't that the navbar is longer than the rest of the page, it's that your row content is getting messed up by Bootstrap's default row formatting. By default Bootstrap is giving it a margin right and left of -15px, override it with a in-line style="margin: auto" and everything fits together nicely.

Upvotes: 1

Related Questions