Links do not align on each div in a Footer

Navigation
2

Hello! In the development part of my site (in HTML5, CSS3), I came across a problem in the links in the Footer sections, which both placed inside div tags 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>
    
asked by anonymous 14.02.2017 / 15:44

1 answer

2

I think you missed some spacing and you closed some DIVs incorrectly. Try the following changes in 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>
    
14.02.2017 / 15:50
How to use LIKE in bindValue? Return from json_encode takes the order of asort ()