Footer not displaying columns correctly (CSS) - html

Question

I am trying to put together 4-column footer. However I am struggling with making the columns and the elements inside of them fully aligned. For some reason the 2nd column comes out lower than the first one. Like this:
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>
Here is my HTML:
Can someone help me figure out why the 2nd column item begins lower than the first column?

Answer 1

Add vertical-align: top to the footer_column class or use inline-table instead of inline-block.
Inline-block elements by default generate spaces in between them and thus the cause of your problem. Learn more about it here: Space between inline-block elements
.footer_column {
display: inline-block; /* or inline-table */
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top; /* Add */
}
#footer_wrapper {
width: 100%;
height: 502px;
min-width: 960px;
}
.line_breaker {
display: block;
width: 100%;
height: 50px;
border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/
.logo_container {
display: block;
height: 150px;
width: 100%;
}
.logo_container img {
margin: 50px 0 50px 10%;
height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/
.content_container {
position: relative;
display: block;
width: 80%;
margin: 0px 10%;
height: 300px;
text-align: center;
}
.footer_column {
display: inline-block;
height: 350px;
width: 18%;
margin: 20px 1%;
vertical-align: top;
}
.column_item_wrapper {
position: relative;
width: 100%;
height: 30px;
}
.column_item_square {
display: inline;
float: left;
margin: 1px 10px 10px 0px;
width: 15px;
height: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid orangered;
}
.column_item_text {}
<footer>
<div id="footer_wrapper">
<div class="line_breaker"></div>
<div class="logo_container">
<img id="logo" src="images/brand.png">
</div>
<div class="content_container">
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
<div class="column_item_wrapper">
<div class="column_item_square"></div>
<a href="#" class="column_item_text">
<span>About Us</span>
</a>
</div>
</div>
<div class="footer_column">
Column 1
</div>
<div class="footer_column">
Column 1
</div>
</div>
</div>
</footer>