title: Minimizing browser window in Firefox & Chrome adds white space to right of page
body: <p>As the title suggests, when I resize my Chrome or Firefox browser window, little by little, white space is added to the right side of the page. I fixed this by setting <code>width:100%</code>to <code>navbar-header</code>(refer to code below), but now it's caused another problem. I'm not sure if it's possible to cater for both, but I need it to.</p>
  
  <p>It's a bit hard to explain what's happened, so hopefully the two images below will be enough explanation.</p>
  
  <p><a href="https://i.stack.imgur.com/yeB7p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yeB7p.png" alt="enter image description here"></a></p>
  
  <p>The above image is how my website looks after setting <code>width:100%</code>to <code>navbar-header</code>. Below is how I want it to look.</p>
  
  <p><a href="https://i.stack.imgur.com/hYwmr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hYwmr.png" alt="enter image description here"></a></p>
  
  <p>So, does anyone know how I can solve this issue? The CSS and HTML is below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
   margin:0;
   padding:0;
   height:100%;
   width:100%;
   position:relative;
  }
  
  body {
   margin:0;
   padding:0;
   height:100%;
   width:100%;
   position:absolute;
   bottom:0;
   top:0;
   left:0;
   right:0;
  }
  
  p {
   margin:0;
   padding:0;
   color:#1C1C1C;
  }
  
  img {
   margin:0;
   padding:0;
  }
  
  .maincontainer {
   position:relative;
   padding:0;
   margin:0;
  }
  
  .container {
   width:100%;
   min-height:100%;
   position:relative;
   margin:0;
   padding:0;
  }
  
  .container:after {
   content:"";
   display:block;
  }
  
  .logo {
   float:left;
   margin-left:20px;
   font-family:'Advent Pro', sans-serif;
   font-weight:100;
   color:#1C1C1C;
  }
  
  @media screen and (min-width:768px) {
   .logo {
    float:left;
    margin-left:5px;
    font-family:'Advent Pro', sans-serif;
    font-weight:100;
    color:#1C1C1C;
   }
  }
  
  .name {
   float:left;
   margin:5px 10px 0px 10px;
   font-size:37px;
  }
  
  .type {
   float:left;
   width:50px;
   margin-top:6px;
   padding:1px 0px 1px 10px;
   font-size:15px;
   border-left:1px solid #1C1C1C;
  }
  
  .nav {
   float:right;
   margin:0;
   padding:0;
   list-style:none;
   width:300px;
  }
  
  @media screen and (min-width:500px) {
   .nav {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    width:444px;
   }
  }
  
  .nav li {
   float:left;
   padding:16px 10px 13px 10px;
   font-family:'Advent Pro', sans-serif;
   font-weight:200;
   font-size:17px;
   color:#1C1C1C;
  }
  
  @media screen and (min-width:500px) {
   .nav li {
    float:left;
    padding:16px 25px 13px 25px;
    font-family:'Advent Pro', sans-serif;
    font-weight:200;
    font-size:17px;
    color:#1C1C1C;
   }
  }
  
  .reposition {
   position:absolute;
   left:50%;
   -webkit-transform: translate(-50%, -0%);
   -moz-transform: translate(-50%, -0%);
  }
  
  @media screen and (min-width: 768px) {
   .reposition {
    position:static;
    float:right;
    -webkit-transform: translate(-0%, -0%);
    -moz-transform: translate(-0%, -0%);
   }
  }
  
  .nav li:hover {
   border-bottom:2px solid #1C1C1C;
  }
  
  .navbar-toggle {
   margin-top:13px;
   margin-right:-5px;
  }
  
  .collapse {
   height:56px;
  }
  
  .navbar-header {
   height:55px;
   padding:0;
   margin:0;
   width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  
   &lt;head&gt;
    
       &lt;meta charset="utf-8"&gt;
       &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       
       &lt;title&gt;Tim Corin Photography&lt;/title&gt;
       
       &lt;link href='https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab|Cinzel|Jura:400,300|Nixie+One|Advent+Pro:100,300,200' rel='stylesheet' type='text/css'&gt;
       &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
       &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
       
       &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
     
   &lt;body onLoad="switchImage('slideImg')"&gt;
     
   &lt;div class="maincontainer"&gt;
   
   &lt;div class="mainheader"&gt;
  
     &lt;div class="navbar navbar-default"&gt;
         
      &lt;div class="container"&gt;
         
          &lt;div class="navbar-header"&gt;
         
       &lt;a href="index.html"&gt;
     
        &lt;div class="logo"&gt;
     
         &lt;p class="name"&gt;Tim Corin&lt;/p&gt;
    
         &lt;p class="type"&gt;Wildlife Photography&lt;/p&gt;
      
        &lt;/div&gt;
     
       &lt;/a&gt;
              
           &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
           
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
           
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            
           &lt;/button&gt;
          
          &lt;/div&gt;
          
          &lt;div class="collapse navbar-collapse"&gt;
       
           &lt;div class="reposition"&gt;
           
           &lt;ul class="nav navbar-nav"&gt;
           
            &lt;a href=""&gt;&lt;li class="home"&gt;Home&lt;/li&gt;&lt;/a&gt;
        &lt;a href=""&gt;&lt;li class="gallery"&gt;Gallery&lt;/li&gt;&lt;/a&gt;
        &lt;a href=""&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
        &lt;a href=""&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;
        &lt;a href=""&gt;&lt;li&gt;Blog&lt;/li&gt;&lt;/a&gt;
        
           &lt;/ul&gt;
           
           &lt;/div&gt;
          
          &lt;/div&gt;
         
         &lt;/div&gt;
         
     &lt;/div&gt;
     
    &lt;/div&gt;
     
    &lt;/div&gt;
   
   &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
     
   &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
     
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
   
     &lt;/body&gt;
     
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>