Olá! Na parte do desenvolvimento de meu site (em HTML5, CSS3), me deparei com um problema nos links das seções do Footer, que ambos colocados dentro de tags div
não se alinham verticalmente abaixo de cada seção, ocasionando colapso. Irei anexar uma imagem com a opção que almejo, e depois os códigos:
footer {
background-color: #0d1015;
width: 980px;
margin-top: 1.2em;
border-top: 6px solid #ffcb08;
clear: both;
}
#footer-sections {
font-family: 'Oswald', sans-serif;
font-size: 18px;
margin-left: 2em;
text-transform: uppercase;
text-align: center;
color: white;
display: inline-block;
}
#footer-sections img {
max-width: 150px;
float: left;
margin-top: 25px;
}
.footer-title {
float: left;
width: 200px;
height: 150px;
border-left: 1px solid #ebedf0;
margin: 1em 15px;
}
.footer-link {
display: inline-block;
}
<footer>
<div id="footer-sections">
<a href="index.html"><img src="http://i.imgur.com/yXnNKRi.png" alt="Logo Footer" title="Logo Footer"></a>
<div id="caixa-1" class="footer-title">SEÇÕES</div>
<div class="footer-link">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="history.html">HISTORY</a>
<a href="contact.html">CONTACT</a>
</div>
<div id="caixa-2" class="footer-title">SOUVENIRS</div>
<div class="footer-link">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="history.html">HISTORY</a>
<a href="contact.html">CONTACT</a>
</div>
<div id="caixa-3" class="footer-title">ESPECIAIS</div>
<div class="footer-link">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="history.html">HISTORY</a>
<a href="contact.html">CONTACT</a>
</div>
</div>