title: How can I make a bar of color go across the screen with text on it?
body: <p>This is my code for my website project. When I execute it, the light blue color bar goes centers on the text, but instead of going horizontally, It goes vertically. I really want it to go horizontal, kind of like a YouTube banner.</p>
  
  <p>This is what it currently looks like: <a href="https://gyazo.com/bec50dc13260d0c3b572f55ab0def12c" rel="nofollow noreferrer">https://gyazo.com/bec50dc13260d0c3b572f55ab0def12c</a></p>
  
  <p>I don't want it to look this way. I don't want it looking like a tower or a building. I want it to go horizontally, like a floor or ceiling.</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>        body,
      html {
        height: 100%;
        margin: 0;
        font-size: 16px;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        line-height: 1.8em;
      }
      
      .jumbotron {
        top: 50%;
        left: 50%;
        background-image: url(image.jpg);
        background-position: 0% 25%;
        background-size: cover;
        background-repeat: no-repeat;
        border: 2px;
      }
      
      .navigation {
        background-color: #330;
        overflow: hidden;
        display: grid;
        grid-template-columns: auto auto auto auto auto;
      }
      
      .navigation a {
        font-size: 20px;
        text-decoration: none;
        color: #f2f2f2;
        text-align: center;
        float: left;
      }
      
      .navigation a:hover {
        background-color: #dddddd;
        color: black;
      }
      
      .navigation a.active {
        background-color: #4CAF50;
        color: white;
      }
      
      .intro {
        background-image: url("Engineering.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
      }
      
      h1 {
        margin: auto;
        z-index: 4;
        text-align: center;
        color: white;
        font-size: 100px;
        padding: 10px;
        line-height: 1.8em;
      }
      
      .secondbg {
        background-image: url("circuit.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        justify-content: center;
        display: flex;
        align-items: top;
      
      } 
      
      .barofcolour {
        
        top: 50%;
        left: 50%;
        background-color: lightblue;
        background-position: 0% 25%;
        background-size: ;
        background-repeat: no-repeat;
        border: 2px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;body&gt;
        &lt;div class="navigation"&gt;
          &lt;a class="active" href="#home"&gt;Home&lt;/a&gt;
          &lt;a href="#aboutMe"&gt;About Me&lt;/a&gt;
          &lt;a href="#careers"&gt;Careers&lt;/a&gt;
          &lt;a href="#contactUs"&gt;Contact Us&lt;/a&gt;
          &lt;a href="#webDev"&gt;Web Development&lt;/a&gt;
        &lt;/div&gt;
      
        &lt;div class="intro"&gt;
          &lt;div class="jumbotron"&gt;
            &lt;h1&gt;Computer Engineering&lt;/h1&gt;
      
          &lt;/div&gt;
      
      
        &lt;/div&gt;
      
      &lt;div class="secondbg"&gt;
        &lt;div class = "barofcolour"&gt;
            &lt;div class="courseinfo"&gt;
              &lt;h2&gt;About This Course
              &lt;/h2&gt;
            &lt;/div&gt;
      
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help will be appreciated :).</p>