Navbar and Extra space

1

please help me, i cant seem to get my about me, contact and portfolio to move to the right! I’ve tried align-right, I’ve tried the float method still wont move to the right please help, also how do i fill the extra white space on the right and left side of the webpage, im still a noob and watched a few videos and still not resolution. here goes my code pen

https://codepen.io/Bodanky/pen/VxBdVX

2

do you remember these guys:


    <div class = "row">
      <div class = "col-lg-20  text-left">
</div>
</div>
3

First decide witch BS framework version you would like to use. Pick ether version 3 or 4 but not both.

Then just take a look into the docs for the navbar of the corresponding version and you will understand what classes you need to make it work as you wish.

4

thank you for that, wasnt for sure if that is what was causing the issue but will look into that

5

The reason for that extra space is that the container-fluid class has a padding of 15px, left and right. Your elements with background-images are applied to divs inside the container-fluid div, so the background-images take up all the available space (which is 100% of your page width minus 15px on both sides). Now, if you add a div with a class row inside your container, the interesting thing is that you will be able to use the full width of the page. That’s because the row kind of negates the 15pixels of padding on the container-fluid, by using a negative margin of 15pxs left and right.

As already mentioned, use one version of bootstrap. (I would pick version 3 .something for now, because the freecodecamp material seems to use that version. Version 4 is pretty new and quite different).

Then, see what happens if you wrap your two main areas each in their own row. The basic html would look like this:

 <div class="container-fluid">
    <div class="row">
        <div class="col-md-12"> [Your pageone stuff goes here]
        </div>
    </div>
    <div class="row">
        <div class="col-md-12"> [Your pagetwo stuff goes here]
        </div>
    </div>
</div>

To get full-width background-images, you probably need to apply the background-image to the row or col-md-12 elements, instead of the div inside of that col-md-12. It can be superhelpful to inspect your page with your browser’s dev tools to see where the margins and paddings are. Background-images do cover the padding of the element they are applied to, but won’t cover the margins.

6

@JuggernOtt81 @thomkhakai thank you both so much! i see it now! i was getting so frustrated that whitespace was there

7

IT WORKED!!! thank you so much!

1 Like