I am attempting to align a series of text links vertically, but for some reason, some of the links are not stacking properly.
Here is the current layout: https://i.sstatic.net/1gonA.jpg.
This is how I want it to look: https://i.sstatic.net/oH0Ap.jpg
Below is the code that I have been working on:
HTML:
<footer class="footer">
<div class="bottom-column">
<div class="bottom-header">STREETZ</div>
<a class"bottom-link" href="#Home">Home</a>
<a class"bottom-link" href="#About">About us</a>
<a class"bottom-link" href="#Sitemap">Sitemap</a>
<a class"bottom-link" href="#Blog">Blog</a>
<a class"bottom-link" href="#Blog">Privacy Policy</a>
<a class"bottom-link" href="#Blog">Terms of Service</a>
</div>
<div class="bottom-column">
<div class="bottom-header">SUPPORT</div>
<a class"bottom-link" href="#Home">FAQ</a>
<a class"bottom-link" href="#About">Contact us</a>
<a class"bottom-link" href="#Sitemap">Shipping</a>
<a class"bottom-link" href="#Blog">Returns</a>
</div>
</footer>
CSS:
.footer {
position: relative;
width: 1024px;
height: 200px;
background: #f5f5f5;
margin: 0 auto;
top: 1255px;
border-top: 1px solid #d8d8d8;
}
.bottom-header {
font-size: 14px;
line-height: 20px;
position: relative;
color: #333;
text-transform: uppercase;
}
.bottom-column {
float:left;
display: inline;
font-size: 15px;
width: 105px;
height: 160px;
padding: 20px;
}
.bottom-column a {
text-decoration: none;
color: #6a6a6a;
float: left;
left: 50px;
padding-top: 10px;
font-size: 13px;
}