title: My div's don't align in my responsive grid layout
body: <p>Here is my codepen for what I have so far
  <a href="https://codepen.io/jonnydrama85/pen/NWRxwVQ" rel="nofollow noreferrer">https://codepen.io/jonnydrama85/pen/NWRxwVQ</a></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>/********** Base styles **********/
  * {
    box-sizing: border-box;
  
  
  }
  
  h1 {
    font-family: monospace;
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
  }
  
  p {
    border: 1px solid black;
    background-color: #A52A2A;
    width: 90%;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  /* Simple Responsive Framework. */
  .row {
    width: 100%;
  }
  
  /********** Large devices only **********/
  @media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left;
      
    }
    .col-lg-1 {
      width: 8.33%;
    }
    .col-lg-2 {
      width: 16.66%;
    }
    .col-lg-3 {
      width: 25%;
    }
    .col-lg-4 {
      width: 33.33%;
    }
    .col-lg-5 {
      width: 41.66%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-7 {
      width: 58.33%;
    }
    .col-lg-8 {
      width: 66.66%;
    }
    .col-lg-9 {
      width: 74.99%;
    }
    .col-lg-10 {
      width: 83.33%;
    }
    .col-lg-11 {
      width: 91.66%;
    }
    .col-lg-12 {
      width: 100%;
    }
  }
  
  /********** Medium devices only **********/
  @media (min-width: 992px) and (max-width: 1199px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
      float: left;
    }
  
  
    .col-md-1 {
      width: 8.33%;
    }
  
    .col-md-2 {
      width: 16.67%;
    }
  
    .col-md-3 {
      width: 25%;
    }
  
    .col-md-4 {
      width: 33.33%;
    }
  
    .col-md-5 {
      width: 41.67%;
    }
  
    .col-md-6 {
      width: 50%;
    }
  
    .col-md-7 {
      width: 58.33%;
    }
  
    .col-md-8 {
      width: 66.67%;
    }
  
    .col-md-9 {
      width: 75%;
    }
  
    .col-md-10 {
      width: 83.33%;
    }
  
    .col-md-11 {
      width: 91.67%;
    }
    .col-md-12 {
      width: 100%;
    }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;title&gt;Module2-solution!&lt;/title&gt;
  &lt;style&gt;
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;My Menu&lt;/h1&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-lg-4 col-md-6"&gt;&lt;p&gt;Item 1&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-lg-4 col-md-6"&gt;&lt;p&gt;Item 2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-lg-4 col-md-12"&gt;&lt;p&gt;Item 3&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am trying to have it when it is in the area of 992px and 1199px that it has 2 columns on top and one below that spans the entire width. So that the top div one and two sides are aligned with the sides for div three.</p>
  <p>I have no idea how to fix this. Any help would be appreciated.</p>