title: Positioning a Navbar Below an Image
body: <p>On my site, <a href="http://www.tokensofchange.org" rel="nofollow">http://www.tokensofchange.org</a>, the only way to position my navbar in the correct place is to use a margin-top style in the CSS.</p>
  
  <pre><code>.nav {
      margin-top:10.3%;
      width: 70%;
      background-color: #050936;
      height:92px;
      float: right;
      border-top: 5px solid rgba(0,108,255,0.35);
      }
  </code></pre>
  
  <p>If I remove the <code>margin-top: 10.3%</code>, the navbar is pushed up under the green buttons shown on the site. I am not sure if the background image is formatted incorrectly to push the navbar down: </p>
  
  <pre><code>.backgrounddiv {
      background: url('/images/Background_Index3.jpg');
      padding-bottom: 2%;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p>The two buttons displayed do not have any margin styles included, so I am unsure why the navbar does not sit below the header with the background image, logo, and buttons. Any ideas would be greatly appreciated. Thanks!</p>