I try to make a footer with 3 cols but I can't make it. So here is the result I try to do 

[![enter image description here](https://i.stack.imgur.com/47g1n.jpg)](https://i.stack.imgur.com/47g1n.jpg)

But instead of this I get this result

[![enter image description here](https://i.stack.imgur.com/P90cf.jpg)](https://i.stack.imgur.com/P90cf.jpg)

Here is my html and CSS code:

```
.footer {
background:none #333;
height:100%;
margin:0 10px;
padding:0;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
 .footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}
.footer div:first-child ul li:first-child a {
padding-left:0;
}
.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
   }
 .footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}
 .footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
 }
.footer aside h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
 }
.footer div h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
float: left;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
padding-left: 28%;
 }
.footer div p{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
 .footer div img{
padding: 20px 0 0 20px;
}
.footer div ul li a:hover{
color: #1b9bff;
 }

```

And my html code

```
         <div id="main-footer">
       <div class="footer">
                    <aside>

                        <h4>Sitemap</h4>
                        <ul>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                      </aside>
                        <div>
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div>
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>

      </div>
    </div>

```

Thank you