title: CSS GridView issue
body: <p>I'm doing something wrong with the css code and it doesn't look the way I wanted. I attached a link to the post to see how it is supposed to look like and a picture to see how it looks like now. I'm posting the HTML code as well as CSS code. I tried to find what I'm doing wrong but after spending 2 hours, trying to find what is wrong, I finally gave up and I started to look for help.</p>
  
  <p><a href="https://storage.googleapis.com/codevolve-assets/cengage/html-css3-carey-7th/3_RA_1.PNG" rel="nofollow noreferrer">How it should look like</a></p>
  
  <p><a href="https://i.stack.imgur.com/i4NkF.jpg" rel="nofollow noreferrer">Current design</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header&gt;
    &lt;img src="pc_logo.png" alt="Pandaisia Chocolates" /&gt;
    &lt;nav class="horizontal"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="pc_home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;The Store&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;My Account&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Specials&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div class="newRow"&gt;
    &lt;div class="col-2-3"&gt;
      &lt;article id="intro"&gt;
        &lt;h1&gt;March Specials&lt;/h1&gt;
        &lt;p&gt;Spring is coming and we've got some mouth-watering specials to help you celebrate the change in seasons in style! Featured throughout March is our always-popular Chocolate Covered Strawberries / Rose Fruit Syrup Combo, now at the special low price
          of $29.95. For that special someone, consider our Red Rose Select box of Spring chocolates. Remember that for every order of $25 or more, you receive a free truffle of your choice. For orders of $100 or more we throw in a four-piece gift box of
          our signature chocolates and truffles.&lt;/p&gt;
      &lt;/article&gt;
      &lt;div class="newRow"&gt;
        &lt;div class="col-1-3 specials"&gt;
          &lt;img src="pc_photo7.png" alt="" /&gt;
          &lt;h1&gt;Red Rose Select&lt;/h1&gt;
          &lt;p&gt;A classic collection of 18 signature chocolates served with a romantic red rose for the special person in your life. One of our most popular box sets.&lt;/p&gt;
          &lt;p&gt;$24.95&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Order Now&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-1-3 specials"&gt;
          &lt;img src="pc_photo8.png" alt="" /&gt;
          &lt;h1&gt;Your Choice&lt;/h1&gt;
          &lt;p&gt;Build your own collection of signature truffles and chocolates. Now you can choose old favorites from our 24-year history of award-winning chocolates and sweets.&lt;/p&gt;
          &lt;p&gt;$32.55&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Order Now&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-1-3 specials"&gt;
          &lt;img src="pc_photo9.png" alt="" /&gt;
          &lt;h1&gt;Praline Signatures&lt;/h1&gt;
          &lt;p&gt;Delicious chocolate with delicious pralines presented in a beautiful and elegant box. Enjoy this fantastic collection inspired by the best Parisian chocolate shops.&lt;/p&gt;
          &lt;p&gt;$39.23&lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;Order Now&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-1-3" id="awardList"&gt;
      &lt;h1&gt;Awards&lt;/h1&gt;
      &lt;div class="awards" id="award1"&gt;
        &lt;img src="pc_award1.png" alt="" /&gt;
        &lt;p&gt;Best of Show&lt;/p&gt;
        &lt;p&gt;Confectioners Association&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="awards" id="award2"&gt;
        &lt;img src="pc_award2.png" alt="" /&gt;
        &lt;p&gt;Five Stars&lt;/p&gt;
        &lt;p&gt;Confectioner Quarterly&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="awards" id="award3"&gt;
        &lt;img src="pc_award3.png" alt="" /&gt;
        &lt;p&gt;Best Chocolate&lt;/p&gt;
        &lt;p&gt;Food World&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="awards" id="award4"&gt;
        &lt;img src="pc_award4.png" alt="" /&gt;
        &lt;p&gt;Best Chocolate&lt;/p&gt;
        &lt;p&gt;Choco-Fest&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="awards" id="award5"&gt;
        &lt;img src="pc_award4.png" alt="" /&gt;
        &lt;p&gt;Best Dessert&lt;/p&gt;
        &lt;p&gt;Choco-Fest&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;
    Pandaisia Chocolates &amp;copy; 2017 All Rights Reserved
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    min-width: 640px;
    width: 95%;
  }
  
  
  /* Image Styles */
  
  body img {
    display: block;
    width: 100%;
  }
  
  
  /* Horizontal Navigation Styles */
  
  body&gt;header&gt;nav.horizontal li {
    width: 16.66%;
  }
  
  nav.horizontal li {
    display: block;
    float: left;
  }
  
  nav a {
    display: block;
  }
  
  
  /* Row Styles */
  
  div.newRow {
    clear: both;
    width: 100%;
  }
  
  div.newRow:after {
    clear: left;
    content: "";
    display: table;
  }
  
  
  /* Column Styles */
  
  div[class^="col-"] {
    float: left;
    padding: 2%;
  }
  
  div.col-1-1 {
    width: 100%;
  }
  
  div.col-1-2 {
    width: 50%;
  }
  
  div.col-1-3 {
    width: 33.33%;
  }
  
  div.col-2-3 {
    width: 67.67%;
  }
  
  div.col-1-4 {
    width: 25%;
  }
  
  div.col-3-4 {
    width: 75%;
  }
  
  div[class^="col-"]:after {
    clear: left;
    content: "";
    display: table;
  }
  
  
  /* Specials Styles */
  
  div {
    min-height: 400px;
    outline: 1px dashed rgb(71, 52, 29);
  }
  
  
  /* Award Styles */
  
  div#awardList {
    position: relative;
    height: 650px;
    overflow: auto;
  }
  
  div.awards&gt;div#award1 {
    top: 80px;
    left: 5%;
  }
  
  div.awards&gt;div#award2 {
    top: 280px;
    left: 60%;
  }
  
  div.awards&gt;div#award3 {
    top: 400px;
    left: 20%;
  }
  
  div.awards&gt;div#award4 {
    top: 630px;
    left: 45%;
  }
  
  div.awards&gt;div#award5 {
    top: 750px;
    left: 5%;
  }
  
  
  /* Footer Styles */
  
  body&gt;footer {
    clear: both;
  }
  </code></pre>