title: column is below eachother
body: <p>I cannot understand why my col4 is comming below eachother, and not in a row. The Sec 1 and Sec 2 should be beside eachother. I have tried to define all my col width in my css. What am I missing here? </p>
  
  <p><a href="https://jsfiddle.net/oczsxnc4/" rel="nofollow">Fiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;| Fishing |&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/build.css"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="main-header" role="main"&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col12"&gt;
              &lt;h2&gt;Report&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" role="section"&gt;
          &lt;div class="col4"&gt;
              &lt;h4&gt;Sec 1&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col4" role="section"&gt;
              &lt;h4&gt;Sec 2&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
          margin: 0px;
          padding: 0px;
          font-size: 40px;
      }
  
      .main-header {
          background: url(../img/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          height: 500px;
          margin-bottom: 20px;
          overflow: hidden;
      }
  
      /* Rows */
      .row{
        margin-left:-15px;
        margin-right:-15px;
       }
      .row{:after{
        content:'';
        display:block;
        clear:both
      }
      /* General properties of columns */
      .col{
        padding: 0rem;
        float:left; 
      }
  
      /* Column Definition */
      .col1{
        width:8.33333333%
      }
  
      .col2{
        width:16.66666667%
      }
  
      .col3{
        width:25%
      }
  
      .col4{
        width:33.33333333%
      }
  
      .col5{
        width:14.666667%
      }
  
      .col6{
        width:50%;
      }
  
      .col7{
        width:58.33333333%
      }
  
      .col8{
        width:66.6666667%
      }
  
      .col9{
        width:75%
      }
  
      .col10{
        width:83.33333333%
      }
  
      .col11{
        width:91.6666666%
      }
      .col12{
        width:100%;
      }
  </code></pre>