html - Bootstrap Navbar causing spacing on the right hand side -

i aware there other questions addressing issue. however, have tried them , nothing appears work particular issue. have noticed quite old , bootstrap has changed in time. asking again. apologies.

i have theme found on codepen modifying gain better understanding of bootstrap per tips freecodecamp. tearing hair out on last simple thing.

tha navbar creating unnecessary white space throughout entire site on right margin.

it present here: http://codepen.io/er-c/pen/ygzkmg/

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>         </button>       <a class="navbar-brand page-scroll" href="#page-top">       </a>     </div>     <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>         <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>       </ul>     </div>   </div> </nav> 

what on earth can eliminate white on over right:

imgur

i totally stuck.

your trouble isn't coming nav: it's right padding on cityscape. .col- classes padding-right, there's padding on right of main #about .row.pt-30 div.

there various ways around this. searching give lot of people recommending add "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 case think want 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="http://i59.tinypic.com/awsxg2.png" alt="#">   </div> </div> 

with

<div class="container-fluid pt-30">     <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#"> </div>