My navbar doesn't go all the way

Hello!

I’m in the process of trying to make my second project, the personal portfolio, but I’m having problems with my navbar. The top bar ends too soon. And I can’t seem to find out why.

When you say the top bar ends too soon, I’m not sure what you mean. But the official bootstrap documentation is very helpful. Here is the section for navbars.

1 Like

You should use the container or container-fluid class. You can just wrap all your html:

<div class="container-fluid">
– All your HTML —
</div>

And you will also have to remove the margin: 0px on the .navbar.

As @JavaTheNutt said, have a look at the Bootstrap docs, especially the part about the grid.

1 Like

For me at least, the navbar ends before the screenspace ends. Which results in the body’s background colour to show.

But if I add in the container-fluid the navbar is full once again, BUT I have a new problem(which is what the margin:0px fixed.), which is that I get a gap between the navbar and the div containing the text and picture underneath.

I guess I can admit that I’m a little rusty when it comes to Bootstrap as I just now returned to FCC after 6 months of absence.

For me at least, the navbar ends before the screenspace ends. Which results in the body’s background colour to show.

But if I add in the container-fluid the navbar is full once again, BUT I have a new problem(which is what the margin:0px fixed.), which is that I get a gap between the navbar and the div containing the text and picture underneath.

Use: margin-bottom: 0; This will only change the margin on the bottom and not left and right (which was the part that interfered with bootstrap).

2 Likes

Ah, I see. So simple. I guess I should read up on the documentation once again then.

Thanks for the help!

1 Like