title: Pictures appearing underneath Bootstrap navbar instead of below it
body: <p>I'm creating a website using Ruby on Rails and Bootstrap (v4.0.0-alpha.6). I have a navbar at the top of the screen, and a picture area (using a stock picture at the moment) positioned beneath it in the HTML document. </p>
  
  <p><strong>application.html.erb</strong> <em>(main layout file)</em></p>
  
  <pre><code>      ...
        &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
        &lt;%= render 'layouts/rails_default' %&gt;
        &lt;%= render 'layouts/shim' %&gt;
        ...
    &lt;/head&gt;
    &lt;body&gt;
        &lt;%= render 'layouts/header' %&gt;
        &lt;div class="container"&gt;
            &lt;% flash.each do |message_type, message| %&gt;
            &lt;div class="alert alert-&lt;%= message_type %&gt;"&gt;&lt;%= message %&gt;&lt;/div&gt;
            &lt;% end %&gt;
            &lt;%= yield %&gt;
        &lt;/div&gt;
        &lt;%= render 'layouts/footer' %&gt;
        ...
  </code></pre>
  
  <p><strong>home.html.erb</strong></p>
  
  <pre><code>&lt;% provide(:title, "Home") %&gt;
  &lt;div class="center homePicBlock" id="homePicBlockOne"&gt;
  
    &lt;h1 id="homeHeaderText" class="headerText"&gt;Simutronix&lt;/h1&gt;
  
    &lt;h2 id="homeSubText" class="subHeaderText"&gt;Radical Optimisation Solutions&lt;/h2&gt;
  
    &lt;h3 id="homeSecondSubText" class="miniHeaderText"&gt;50 Year Proven Methods&lt;/h3&gt;
  
    &lt;%= link_to "Request Consultation", signup_path, class: "btn btn-lg btn-primary" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>_header.html.erb</strong></p>
  
  <pre><code>&lt;div class="container navbar-container"&gt;
      &lt;nav class="navbar navbar-toggleable-md fixed-top"&gt;
          &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h5&gt;&lt;%= link_to 'Simutronix', home_path, id: "companyName" %&gt;&lt;/h5&gt;
          &lt;%= image_tag("cogsNewSmall.png") %&gt;
          &lt;div class="collapse navbar-collapse" id="navbarDefault"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                  &lt;span id="leftNavLinks"&gt;
                      &lt;%= link_to 'Home', home_path %&gt;
                      &lt;%= link_to 'Products and Solutions', products_path %&gt;
                      &lt;%= link_to 'Company Background', background_path %&gt;
                      &lt;%= link_to 'About', about_path %&gt;
                  &lt;/span&gt;
                  &lt;span id="rightNavLinks"&gt;
                      &lt;%= link_to 'Help', help_path %&gt;
                      &lt;%= link_to 'Contact', contact_path %&gt;
                  &lt;/span&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p><strong>static_pages.scss</strong></p>
  
  <pre><code>@import "bootstrap";
  
  /* home */
  
  #homePicBlockOne {
     background-image: url("businessServicesSmall.jpg"); 
  }
  
  .homePicBlock {
     padding: 10px;
  }
  ...
  </code></pre>
  
  <p><strong>header.scss</strong></p>
  
  <pre><code>@import "bootstrap";
  
  /* header */
  
  #logo {
      clear: right;
      padding-top: 0px !important;
      margin-left: 25px !important;
      margin-top: 15px !important;
  }
  
  #companyName {
      color: #acb8a9 !important;
      position: relative;
      bottom: 20px;
      margin-left: 25px !important;
      margin-right: 10px !important;
      &amp;:hover {
          text-decoration: none;
      }
  }
  
  .navbar {
      padding-top: 0px !important;
      background-color: rgba(251, 250, 250, 0.8);
  }
  
  #leftNavLinks {
      margin-left: 25px;
  }
  
  #rightNavLinks {
      margin-left: 45px;
  }
  
  nav {
      a {
          padding-right: 10px;
          li {
             position: relative;
             top: 20px;
          }
      }
  }
  </code></pre>
  
  <p>As you can see from the picture, <strong>instead of appearing below the navbar, the stock picture is appearing within it</strong>, which isn't what I want.</p>
  
  <p><a href="https://i.stack.imgur.com/xDFr6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xDFr6.png" alt="Simutronix"></a></p>
  
  <p>While <strong>I could hack around this by relatively positioning the picture div downwards, this isn't what I want to do</strong>, as I am worried it will cause problems for future and unwanted side-effects for different sizes of screen etc. So, what I would like to know is, how do I correctly alter the navbar so other elements appear below it in the document flow?</p>
  
  <p><em>Updated in response to offered answer.</em></p>
  
  <p><strong>custom.css</strong></p>
  
  <pre><code>@import 'bootstrap';
  
  /* universal */
  
  body {
    padding-top: 60px;
  }
  
  section {
    overflow: auto;
  }
  
  textarea {
    resize: vertical;
  }
  
  .center {
    text-align: center;
    h1 {
      margin-bottom: 10px;
    }
  }
  </code></pre>