Links do not align on each div in a footer

Question

Hello! In the development part of my site (in HTML5, CSS3), I came across a problem in the links of the Footer sections, which both placed within tags div do not align vertically below each section, causing collapse. I will attach an image with the option I want, and then the codes:

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>

Answer 1

I think you missed some spacing and you closed some divs incorrectly. Try the following changes to your HTML:

<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<br/>
            <div class="footer-link">
                <a href="index.html">HOME</a><br/>
                <a href="about.html">ABOUT</a><br/>
                <a href="history.html">HISTORY</a><br/>
                <a href="contact.html">CONTACT</a>
            </div>
        </div>
        <div id="caixa-2" class="footer-title">SOUVENIRS<br/>
            <div class="footer-link">
                <a href="index.html">HOME</a><br/>
                <a href="about.html">ABOUT</a><br/>
                <a href="history.html">HISTORY</a><br/>
                <a href="contact.html">CONTACT</a>
            </div>
        </div>
        <div id="caixa-3" class="footer-title">ESPECIAIS<br/>
            <div class="footer-link">
                <a href="index.html">HOME</a><br/>
                <a href="about.html">ABOUT</a><br/>
                <a href="history.html">HISTORY</a><br/>
                <a href="contact.html">CONTACT</a>
            </div>
        </div>
    </div>
</footer>