CSS two column layout not horizontally aligned - html

Question

I want "About This Page" and "Around the web" to be horizontally aligned.
Also, open to any suggestions for improving this snippet of code. I just want to have a responsive / simple two column layout behind a wide colored background.
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->

Answer 1

I would recommend using flexbox for this, which can be achieved by simply adding:
.container {
display: flex;
align-items: center;
justify-content: center;
}
If you want to have both boxes occupy the same height, you'll need a fixed height on .footer-links and .built-with. I've gone with 150px in the following example:
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Flexbox has support in every browser apart from Internet Explorer (though it's coming to IE as well). If you'd like to support Internet Explorer as well, you can use vertical-align: middle along with display: inline-block, as is demonstrated in this answer.
Hope this helps! :)

Answer 2

Simply use flex. Read about it here
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
display: inline-flex;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->

Answer 3

Use table-cell as display property
.footer-links,
.built-with {
display: table-cell;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
I think , it'll horizontally aligned these boxes

Answer 4

this is based off of obsidian ages answer since it wasn't updated to match my exact question.
I edited .footer-above to 1400px since width:100% with code doesn't scale as viewport width changes.
Also, it should be align-items: flex-start; on container class, since i want a baseline at the top of parent div
.footer-above {
width: 1400px;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 960px;
display: flex;
align-items: flex-start;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->