我有2列 and the widths keep edging each other out

Question

最终发生的是，两列不能彼此并排共存而不会使宽度缩小约2％。这样做会导致边缘不与标题对齐，它只是看起来不对。有没有关于'宽度'或'填充'的遗漏？

这就是我想要模仿的：https://www.w3schools.com/howto/howto_css_blog_layout.asp

这是最终发生的事情（在将宽度改变-2％之前）：

当我必须改变宽度时会发生什么：

body {
  padding: 20px;
  background: #f1f1f1;
}

.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

.leftcolumn {
  float: left;
  width: 75%;
}

.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

@media(max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

<div class="header">
  <h2>Harry's Den</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>I love the World</h2>
      <h5>Helloo!</h5>
      <p>Text!</p>
    </div>
    <div class="card">
      <h2>Wow this works so far!</h2>
      <h5>I am just happy to have a semi-functional blog!</h5>
      <p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me!</h2>
      <p>University: Texas Tech University</p>
      <p>Major: Computer Engineering (BS)</p>
      <p>Minor: Mathematics</p>
      <p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
    </div>
    <div class="card">
      <h3>Follow Me!</h3>
      <a href="https://twitter.com/account">Twitter</a>
      <br/>
      <a href="https://www.facebook.com/account">Facebook</a>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Developed by Barry Allen</h2>
  <h2>Quantum Enterprise Projects</h2>
</div>

Answer 1

填充和边框的宽度计算。所以你必须减去它们。

在你的情况下，你可以做到

.rightcolumn {
    width: calc(25% - 20px); 
}

Answer 2

以下是MDN Web Doc的信息。

默认情况下，在CSS框模型中，分配给元素的宽度和高度仅应用于元素的内容框。如果元素具有任何边框或填充，则会将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。这意味着当您设置宽度和高度时，您必须调整您给出的值以允许可以添加的任何边框或填充。

box-sizing属性可用于调整此行为：

• content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度将添加到最终渲染宽度。
• border-box告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则该100个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外宽度。这通常使元素的大小更容易。

您必须使用box-sizing:border-box来包含边框，填充和边距，包括在元素宽度中的所有内容。

在MDN Web Docs中阅读更多信息

* {
  box-sizing:border-box;
}

* {
  box-sizing:border-box;
}
body{
    padding: 20px;
    background: #f1f1f1;
}
.header{
    padding: 30px;
    font-size: 40px;
    text-align: center;
    background: white;
}
.leftcolumn{
    float: left;
    width: 75%;
}
.rightcolumn{
    float: left;
    width: 25%;
    padding-left: 20px;
}
.card{
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}
.row:after{
    content: "";
    display: table;
    clear: both;
}
.footer{
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}
@media(max-width: 800px){
    .leftcolumn, .rightcolumn{
        width: 100%;
        padding: 0;
    }
}

<div class="header">
        <h2>Harry's Den</h2>
    </div>
    <div class="row">
        <div class="leftcolumn">
            <div class="card">
                <h2>I love the World</h2>
                <h5>Helloo!</h5>
                <p>Text!</p>
            </div>
            <div class="card">
                <h2>Wow this works so far!</h2>
                <h5>I am just happy to have a semi-functional blog!</h5>
                <p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
            </div>
        </div>
        <div class="rightcolumn">
            <div class="card">
                <h2>About Me!</h2>
                <p>University: Texas Tech University</p>
                <p>Major: Computer Engineering (BS)</p>
                <p>Minor: Mathematics</p>
                <p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
            </div>
            <div class="card">
                <h3>Popular Post</h3>      
            </div>
            <div class="card">
                <h3>Follow Me!</h3>
                <a href="https://twitter.com/account">Twitter</a>
                <br/>
                <a href="https://www.facebook.com/account">Facebook</a>
            </div>
        </div>
    </div>
    <div class="footer">
        <h2>Developed by Barry Allen</h2>
        <h2>Quantum Enterprise Projects</h2>
    </div>

这是小提琴Link。您可以扩展和缩小屏幕大小，并查看它的反应方式。