title: Fixed position navbar/header works but content won't scroll under header
body: <p>Hi I'm struggling the main content to go underneath the fixed header as the user scrolls down.</p>
  
  <p>Instead of the main body going underneath the header as the user scrolls down...
  the main body just moves upwards towards the fixed header...and covers it! rather than it disappearing from view behind the fixed header.</p>
  
  <p>I've looked for many examples..they're helpful but doesn't explain why the main content isn't disappearing behind the fixed header...just moving upwards covering the header.</p>
  
  <p>I've tried adding:</p>
  
  <pre><code>position: relative;
  </code></pre>
  
  <p>But it makes the maincontent disappear.</p>
  
  <p>Thanks.</p>
  
  <p><img src="https://i.stack.imgur.com/0pijn.jpg" alt="screenshot1"></p>
  
  <p>UPDATED NEW CODE:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html ng-app="financeApp"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- CSS --&gt;
  
  
  
   &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
  
  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
    &lt;!-- HEADER AND NAVBAR --&gt;
    &lt;header&gt;
  
  
  
  
  
     &lt;div class="wrap"&gt;
        &lt;!-- logo --&gt;
  
     &lt;!--    &lt;a href="#!"&gt;&lt;img class="logo" src="img/history_00.png" /&gt;&lt;/a&gt;
    &lt;h7&gt;Building lasting relationships&lt;h7&gt;--&gt;
  
  
  
  &lt;ng-controller = "demoCtrl"&gt;
  
  &lt;ul class="nav nav-pills pull-left"&gt;
  
  
  
        &lt;li ng-class="{active: isState('home') }"&gt;
          &lt;a ui-sref="home"&gt;HOME&lt;/a&gt;
        &lt;/li&gt;
        &lt;li ng-class="{active: isState('form') }"&gt;
          &lt;a ui-sref="form"&gt;ABOUT US&lt;/a&gt;
  
  
  
  &lt;li ng-class="{active: isState('form') }"&gt;
            &lt;a href="#candidates"&gt;CANDIDATES&lt;/a&gt;
  
  &lt;/li&gt;
  
         &lt;li ng-class="{active: isState('jobs') }"&gt;
          &lt;a ui-sref="jobs"&gt;JOBS&lt;/a&gt;
        &lt;/li&gt;
         &lt;li ng-class="{active: isState('joinus') }"&gt;
         &lt;a ui-sref="joinus"&gt;JOIN US&lt;/a&gt;
        &lt;/li&gt;
  
  
    &lt;li ng-class="{active: isState('contact') }"&gt;
          &lt;a ui-sref="contact"&gt;CONTACT US&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;h3 class="text-muted"&gt;          &lt;/h3&gt;
      &lt;br&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  
  
  
  
  
  
  &lt;!--&lt;div class="full-background"&gt;--&gt;
  &lt;div ui-view class="main"&gt;&lt;/div&gt;
  
  
  
  
  
  &lt;!--&lt;/div&gt;
  &lt;/div&gt;--&gt;
  
  
  &lt;!-- Loading the Footer --&gt;
    &lt;div id="footer" ng-include="'partials/footer.html'"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
     &lt;!-- App JS --&gt;
  </code></pre>
  
  <p>This is more of style.css:</p>
  
  <pre><code> header {
    height:10px;
  position: fixed;
  width:100%;
  height:75px;
  margin-top:30px;
  margin-bottom: 50px;
  }
  
  header .nav {
   /* float:center;*/
  margin: 10px auto 0;
  /*position: fixed;*/
  /*z-index:1;*/
  background: #0783A9;
  
  }
  .nav {
  
    background-color:#0783A9 ;
    color: white;
  /* float:center;*/
  
  }
  .nav&gt;li&gt;a {
    color: white;
  }
  .nav-pills&gt;li&gt;a:hover {
    color: white;
    background: transparent;
    cursor: pointer;
    background: #cecece;
  }
  </code></pre>