html - CSS GridView 问题

Question

我在 CSS 代码上做错了，它看起来不像我想要的那样。我附上了帖子的链接以查看它应该是什么样子，并附上了一张图片以查看它现在的样子。我发布了 HTML 代码和 CSS 代码。我试图找出我做错了什么，但在花了 2 个小时试图找出问题所在后，我终于放弃了，开始寻求帮助。

How it should look like

Current design

HTML

<header>
  <img src="pc_logo.png" alt="Pandaisia Chocolates" />
  <nav class="horizontal">
    <ul>
      <li><a href="pc_home.html">Home</a></li>
      <li><a href="#">The Store</a></li>
      <li><a href="#">My Account</a></li>
      <li><a href="#">Specials</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Contact Us</a></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><a href="#">Order Now</a></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><a href="#">Order Now</a></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><a href="#">Order Now</a></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 &copy; 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

您为 .col-2-3 使用了错误的宽度值，即 width: 67.67%...

....因为 col-1-3 有 width: 33.33% 而 col-2-3 有 width : 67.67%..这意味着整个宽度将为 33.33%+67.67%=101%...应该是 100%...

应该是width: 66.67%...同样应用box-sizing:border-box

div.col-2-3 {
  width: 66.67%;
}

Fiddle Link