Extra space under page footer - html

Question

I'm remaking an article I found on The Economist (here) and I ran into an issue with my footer where it showed a very thin line of white space under the footer.
I actually resolved the issue but I'm not sure why what I did worked.. Here's the pen for it (here), and here's the footer and HTML code.
/****************
Footer
****************/
/*
The footer is organized into three rows with columns in each row.
*/
footer {
height: 400px;
border-top: 5px red solid;
margin-top: 50px;
background-color: #c1c1c1;
color: white;
background-color: #161616;
}
.footer-container {
width: 80%;
height: 100%;
margin: 0 auto;
}
footer ul {
list-style: none;
}
a:link {
text-decoration: none;
color: #b6b6b6;
font-weight: bold;
font-size: .9em;
}
a:link:hover {
color: white;
}
.footer-link {
padding: 10px 0;
color: #b6b6b6;
font-weight: bold;
}
.footer-link:hover {
color: white;
cursor: pointer;
}
.row-1 {
display: flex;
height: 50%;
}
.row-1-col-1 {
width: 10%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.row-1-col-1 ul {
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0;
padding: 0 15px;
height: 70%;
}
.row-1-col-2 {
width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* "Keep updated */
.row-1-col-2 div p {
font-weight: bold;
color: #7a7a7a;
}
.row-1-col-2 > div {
height: 70%;
margin-left: 30px;
padding-left: 30px;
border-left: 1px #7a7a7a solid;
border-right: 1px #7a7a7a solid;
}
.row-1-col-2 ul {
padding: 0;
display: flex;
}
.footer-s-media-icon {
width: 25px;
padding: 0 15px;
filter: grayscale(100%);
}
.row-1-col-3 {
display: flex;
flex-direction: column;
justify-content: center;
width: 30%;
}
.row-1-col-3 ul {
height: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.row-2 {
height: 40%;
border-top: 1px #7a7a7a solid;
border-bottom: 1px #7a7a7a solid;
}
.row-2-col-1 {
height: 100%;
}
.row-2-col-1 > div {
margin: 0 auto;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.row-2-col-1 > div p {
margin: 0;
text-align: center;
}
/* Published since Sept...to take part in... */
.row-2-col-1 > div p:first-child {
font-weight: bold;
}
/* "a severe contest between intellegence... */
.row-2-col-1 > div p:nth-child(2) {
font-style: italic;
}
.row-3 {
height: 9%;
width: 100%;
display: flex;
}
.row-3-col-1 {
display: flex;
width: 100%;
}
.row-3-col-1 ul {
display: flex;
padding: 0;
margin-bottom: 0;
}
.row-3-col-1 li {
padding: 0 8px;
font-size: .8em;
}
.row-3-col-1 p {
margin-bottom: 0;
margin-top 0;
margin-left: auto;
font-size: .8em;
}
<footer>
<div class="footer-container">
<div class="row-1">
<div class="row-1-col-1">
<ul>
<li class="footer-link">Subscribe</li>
<li class="footer-link">Contact us</li>
<li class="footer-link">Help</li>
</ul>
</div>
<div class="row-1-col-2">
<div>
<p>Keep updated</p>
<ul>
<li><img src="https://www.celestionplus.com/wp-content/themes/celestion-impulse-response-2017/img/icon-facebook.png" class="footer-s-media-icon"></li>
<li><img src="http://www.vonmaur.com/Images/Social/twitter-logo-blue.png" class="footer-s-media-icon"></li>
<li><img src="https://www.carpetone.com/~/media/CarpetOne/Modules/Global/Footer/SocialLinks/google.png?h=30&w=30&la=en" class="footer-s-media-icon"></li>
<li><img src="http://www.shoetastic.ie/skin/frontend/default/theme054/images/linkedin-logo.png" class="footer-s-media-icon"></li>
<li><img src="https://2.bp.blogspot.com/-GEyWc6EEApk/VYCEOt34T-I/AAAAAAAAAmw/slVlbI1gy_c/s1600/tumblr%2Blogo%2B30x30.png" class="footer-s-media-icon"></li>
<li><img src="http://www.oacsd.org/sysimages/iconIG.png" class="footer-s-media-icon"></li>
<li><img src="http://www.sunyjefferson.edu/sites/default/files/images/YouTube-icon.png" class="footer-s-media-icon"></li>
<li><img src="http://theriveratranchomirage.com/wp-content/uploads/2015/11/favicon.png" class="footer-s-media-icon"></li>
</ul>
Subscribe to The Economist newsletters
</div>
</div>
<div class="row-1-col-3">
<ul>
<li class="footer-link">Advertise</li>
<li class="footer-link">Careers</li>
<li class="footer-link">Site Map</li>
<li class="footer-link">Reprints</li>
<li class="footer-link">Media Centre</li>
</ul>
</div>
</div>
<div class="row-2">
<div class="row-2-col-1">
<div>
<p>Published since September 1843 to take part in</p>
<p> “a severe contest between intelligence, which presses forward, and an unworthy, timid ignorance obstructing our progress.”</p>
</div>
</div>
</div>
<div class="row-3">
<div class="row-3-col-1">
<ul>
<li>Terms of Use</li>
<li>Privacy</li>
<li>Cookies</li>
<li>Accessibility</li>
</ul>
<p>Copyright © The Economist Newspaper Limited 2017. All rights reserved.</p>
</div>
</div>
</div>
</footer>
The footer is made of three rows all of which fall within a container. The columns have heights of 50%, 40%, and 9%. The issue was caused due to the 3rd row having a height of 10% which should have summed up to the full 100% of the footer container.
My question is, why did changing the 3rd row's height fix this issue? Does anyone have any background knowledge that would fill in this information for me?

Answer 1

It's because of the borders that you have applied with .row-2 are not calculated as part of the height of the element. They're in addition to it's height. In the end .row-2 is 2px larger than 40%.
You can fix this with box-sizing: border-box;.
border-box
This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.
.footer-container > .row-2 {
box-sizing: border-box;
}
You could also use calc() for height.
.row-2 {
height: calc( 40% - 2px );
border-top: 1px #7a7a7a solid;
border-bottom: 1px #7a7a7a solid;
}
The one issue I have with calc() is if you change the thickness of your borders at all you also have to update the value for height. With box-sizing: border-box; it's automatic.