title: CSS - Align Content Below Fixed Navbar
body: <p>I'm trying to learn responsive <code>CSS</code> but having difficulty with some basic <code>css</code> design. I've created a fixed navbar as you may be able to see in the code below. But the problem i'm facing is that i'm not able to properly align content below it. The content is getting overlapped by the navbar. Can you suggest an appropriate <code>CSS</code> fix and not a workaround like adding empty divs with fixed heights? Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  *{
          box-sizing: border-box;
      }
      
      body{
          margin:0px;
          padding: 0px;
          background-color: darkgrey;
      }
      
      .title-bar{
          position:fixed;
          margin-top:0px;
          z-index: 100;
          opacity: 1;
          background-color:white;
          width: 100%;
          height: 100px;
          border-bottom: solid 4px dodgerblue;
      }
      
      .page-container{
          padding: 0px;
      }
      
      .menu-options{
          list-style-type:none;
      }
      
      .menu-options li{
          display: inline;
          padding: 10px;
      }
      
      .menu-options li:hover{
          background-color: deepskyblue;
      }
      
      .menu-options li a{
          color: black;
          text-decoration:none;
      }
      
      .clear20{
          height: 40px;
          clear: both;
      }
      
      .clear10{
          height: 20px;
          clear: both;
      }
      
      .display-bar-1{
          background-color: deepskyblue;
          height: 200px;
          padding:40px;
          position: relative;
      }
      
      html {
          font-family: "Lucida Sans", sans-serif;
      }
      
      .caps {
          text-transform: uppercase;
      }
      
      .register_button{
          text-align:center;
          padding-top:20px;
          padding-bottom:10px;
          width: 200px;
          height: 70px;
          border: solid 3px white;
          font-style:bold;
          font-size:14pt;
      
      }
      
      .register_button:hover{
          background-color:navajowhite;
          color: white;
          cursor:pointer;
          border-color: black;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
          &lt;link href="responsive.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="page-container"&gt;
      
              &lt;div class="title-bar"&gt;
                  &lt;table width="100%"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h1&gt; Multirater Surveys &lt;/h1&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;ul class="menu-options"&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Home &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; How It Works &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Features &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Surveys &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Plans and Pricings &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Webinars &lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt; &lt;a href="#"&gt; Blog &lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
      
      
              &lt;div class="display-bar-1"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"&gt;
                          World Class Service &lt;br&gt;
                          More Than 100 Clients
                      &lt;/div&gt;
                      &lt;div class="" style="padding:15px;float:left;width:40%;"&gt;
                          &lt;div class="register_button" id="register"&gt; &lt;a style="text-decoration:none;color:black;" href="#"&gt; Register Now &lt;/a&gt; &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-2"&gt;
                  &lt;div&gt;
                      &lt;h1&gt; Some random block of texts &lt;/h1&gt;
                      &lt;p&gt; Hello world how are you ? what is going on? &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-1"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"&gt;
                          World Class Service &lt;br&gt;
                          More Than 100 Clients
                      &lt;/div&gt;
                      &lt;div class="" style="padding:15px;float:left;width:40%;"&gt;
                          &lt;div class="register_button" id="register"&gt; &lt;a style="text-decoration:none;color:black;" href="#"&gt; Register Now &lt;/a&gt; &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-2"&gt;
                  &lt;div&gt;
                      &lt;h1&gt; Some random block of texts &lt;/h1&gt;
                      &lt;p&gt; Hello world how are you ? what is going on? &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-1"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;"&gt;
                          World Class Service &lt;br&gt;
                          More Than 100 Clients
                      &lt;/div&gt;
                      &lt;div class="" style="padding:15px;float:left;width:40%;"&gt;
                          &lt;div class="register_button" id="register"&gt; &lt;a style="text-decoration:none;color:black;" href="#"&gt; Register Now &lt;/a&gt; &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-2"&gt;
                  &lt;div&gt;
                      &lt;h1&gt; Some random block of texts &lt;/h1&gt;
                      &lt;p&gt; Hello world how are you ? what is going on? &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;div class="display-bar-2"&gt;
                  &lt;div&gt;
                      &lt;h1&gt; Some random block of texts &lt;/h1&gt;
                      &lt;p&gt; Hello world how are you ? what is going on? &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      
          &lt;input type="text" class="caps"/&gt;
      
          &lt;script&gt;
          window.onload = function(){
              document.getElementById("register").onclick = function(){
                  window.location = "https://www.google.com";
              }
          }
          &lt;/script&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;
  
  `responsive.html`
  
    </code></pre>
  </div>
  </div>
  </p>