Er-c Er-c - 1 year ago 49
CSS Question

Bootstrap Navbar causing spacing on the right hand side

I am aware that there are other questions addressing this issue. However, I have tried them and nothing appears to work for my particular issue. I have also noticed that most are quite old and bootstrap has changed somewhat in that time. So I am asking again. Apologies.

I have a theme that I found on codepen that I am modifying to gain a better understanding of bootstrap as per some tips from freecodecamp. I am tearing my hair out over this last simple thing.

Tha navbar is creating unnecessary white space throughout the entire site on the right margin.

It is present here:

Relevant code (I think)

<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand page-scroll" href="#page-top">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right links">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#services">Services</a></li>
<li><a class="page-scroll" href="#news">News</a></li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="page-scroll" href="#clients">Clients</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>

What on earth can I do to eliminate the white over on the right:


I am totally stuck.

Answer Source

Your trouble actually isn't coming from the nav: it's right padding on the cityscape. .col- classes get a padding-right, so there's padding on the right of your main #about div.

There are various ways to get around this. Searching SO will give you a lot of people recommending you add a "no right padding" class, like

.dont-pad-me {padding-right: 0}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dont-pad-me">

but in this case I think you just want to replace

<div class="row pt-30">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <img class="peeping-tom" src="" alt="#">


<div class="container-fluid pt-30">
    <img class="peeping-tom" src="" alt="#">