CSS GridView issue - html

Question

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.
How it should look like
Current design
HTML
<header>
<img src="pc_logo.png" alt="Pandaisia Chocolates" />
<nav class="horizontal">
<ul>
<li>Home</li>
<li>The Store</li>
<li>My Account</li>
<li>Specials</li>
<li>Reviews</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="newRow">
<div class="col-2-3">
<article id="intro">
<h1>March Specials</h1>
<p>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.</p>
</article>
<div class="newRow">
<div class="col-1-3 specials">
<img src="pc_photo7.png" alt="" />
<h1>Red Rose Select</h1>
<p>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.</p>
<p>$24.95</p>
<p>Order Now</p>
</div>
<div class="col-1-3 specials">
<img src="pc_photo8.png" alt="" />
<h1>Your Choice</h1>
<p>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.</p>
<p>$32.55</p>
<p>Order Now</p>
</div>
<div class="col-1-3 specials">
<img src="pc_photo9.png" alt="" />
<h1>Praline Signatures</h1>
<p>Delicious chocolate with delicious pralines presented in a beautiful and elegant box. Enjoy this fantastic collection inspired by the best Parisian chocolate shops.</p>
<p>$39.23</p>
<p>Order Now</p>
</div>
</div>
</div>
<div class="col-1-3" id="awardList">
<h1>Awards</h1>
<div class="awards" id="award1">
<img src="pc_award1.png" alt="" />
<p>Best of Show</p>
<p>Confectioners Association</p>
</div>
<div class="awards" id="award2">
<img src="pc_award2.png" alt="" />
<p>Five Stars</p>
<p>Confectioner Quarterly</p>
</div>
<div class="awards" id="award3">
<img src="pc_award3.png" alt="" />
<p>Best Chocolate</p>
<p>Food World</p>
</div>
<div class="awards" id="award4">
<img src="pc_award4.png" alt="" />
<p>Best Chocolate</p>
<p>Choco-Fest</p>
</div>
<div class="awards" id="award5">
<img src="pc_award4.png" alt="" />
<p>Best Dessert</p>
<p>Choco-Fest</p>
</div>
</div>
</div>
<footer>
Pandaisia Chocolates © 2017 All Rights Reserved
</footer>
CSS
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>header>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>div#award1 {
top: 80px;
left: 5%;
}
div.awards>div#award2 {
top: 280px;
left: 60%;
}
div.awards>div#award3 {
top: 400px;
left: 20%;
}
div.awards>div#award4 {
top: 630px;
left: 45%;
}
div.awards>div#award5 {
top: 750px;
left: 5%;
}
/* Footer Styles */
body>footer {
clear: both;
}

Answer 1

You have used wrong width value for the .col-2-3 i.e width: 67.67%...
....as col-1-3 has width: 33.33% and col-2-3 has width: 67.67%..it means the whole width will be 33.33%+67.67%=101%...which should be is 100%...
It should be width: 66.67%...Also apply box-sizing:border-box
div.col-2-3 {
width: 66.67%;
}
Fiddle Link