title: CSS beginner: Responsive style not dispplaying correctly
body: <p>I am a complete beginner in CSS. For my course I have to code a style for just one page (Mockup for tablet is attached: <a href="https://i.stack.imgur.com/PmTxN.png" rel="nofollow noreferrer">Mockup-tablet</a></p>
  
  <p>as I a limited to 2 links). However my div elements are not displaying correctly, one is on the second line on desktop instead of being inline, and the tablet style is wrong too, but I can't figure out why.
  It has been suggested that I use a dedicated div enclosing my elements, but it didn't work.
  Here is my code:</p>
  
  <p><a href="http://codepen.io/anon/pen/dOvbeq" rel="nofollow noreferrer">http://codepen.io/anon/pen/dOvbeq</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Our menu&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Our Menu&lt;/h1&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-lg-4" "col-md-6" "col-xs-12"&gt;&lt;div class="pinktitle"&gt;Chicken&lt;/div&gt;&lt;p&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.&lt;/p&gt;&lt;/div&gt;
  &lt;div class="col-lg-4" "col-md-6" "col-xs-12"&gt;&lt;div class="redtitle"&gt;Beef&lt;/div&gt;&lt;p&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.&lt;/p&gt;&lt;/div&gt;
  &lt;div class="col-lg-4" "col-md-12" "col-xs-12"&gt;&lt;div class="yellowtitle"&gt;Sushi&lt;/div&gt;&lt;p&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  
  
  <pre><code>/********** Base styles **********/
  * {
    box-sizing: border-box;
  }
  h1 {
    margin-bottom: 15px;
    text-align: center;
    font-family: verdana, sans-serif;
    }
  
  .pinktitle {
    text-align: center;
    font-family: verdana, sans-serif;
    border: 1px solid black;
    background-color: #ffb6c1;
    height: 40px;
    width: 120px;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
   }
   .redtitle {
    text-align: center;
    font-family: verdana, sans-serif;
    border: 1px solid black;
    background-color: #dc143c;
    color: white;
    height: 40px;
    width: 120px;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
   }
   .yellowtitle {
    text-align: center;
    font-family: verdana, sans-serif;
    border: 1px solid black;
    background-color: #ffd700;
    height: 40px;
    width: 120px;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
   }
  p {
    border: 1px solid black;
    font-family: verdana, sans-serif;
    background-color: #dcdcdc;
    height: 150px;
    margin: 0px;
    color: black;
  }
  
  /* Simple Responsive Framework. */
  .row {
    width: 100%;
    margin: 0px;
  }
  /********** Large devices only **********/
  @media (min-width: 992px) {
    .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;
      border: 1px solid black;
    }
    .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: 768px) and (max-width: 991px) {
    .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;
      border: 1px solid black;
    }
    .col-md-1 {
      width: 8.33%;
    }
    .col-md-2 {
      width: 16.66%;
    }
    .col-md-3 {
      width: 25%;
    }
    .col-md-4 {
      width: 33.33%;
    }
    .col-md-5 {
      width: 41.66%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-7 {
      width: 58.33%;
    }
    .col-md-8 {
      width: 66.66%;
    }
    .col-md-9 {
      width: 74.99%;
    }
    .col-md-10 {
      width: 83.33%;
    }
    .col-md-11 {
      width: 91.66%;
    }
    .col-md-12 {
      width: 100%;
    }
  }
  @media (max-width: 767px) {
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
      float: left;
      border: 1px solid black;
    }
    .col-xs-1 {
      width: 8.33%;
    }
    .col-xs-2 {
      width: 16.66%;
    }
    .col-xs-3 {
      width: 25%;
    }
    .col-xs-4 {
      width: 33.33%;
    }
    .col-xs-5 {
      width: 41.66%;
    }
    .col-xs-6 {
      width: 50%;
    }
    .col-xs-7 {
      width: 58.33%;
    }
    .col-xs-8 {
      width: 66.66%;
    }
    .col-xs-9 {
      width: 74.99%;
    }
    .col-xs-10 {
      width: 83.33%;
    }
    .col-xs-11 {
      width: 91.66%;
    }
    .col-xs-12 {
      width: 100%;
    }
  }
  </code></pre>
  
  <p>Many thanks if you can help</p>
  
  <p>So after all your answers, I edited the row element like this but it still doesn't work:</p>
  
  <pre><code>.row {
    width: 100%;
    margin: 0px;
    border: 1px solid black;
  }
  </code></pre>
  
  <p>Is there an other div to modify?</p>