Content within container in footer overlaps when reduced to mobile screen - html

Question

I've created a container within my Footer with three columns. When re-sized to below 600px, the Divs display on top of each other. I'd like for the content to be displayed one after another?
Here is the code:
HTML:
<footer>
<div class="footwrap">
<div class="footleft">
<h2>Far East Festival Ltd</br></h2>
<div class="subhead">
Registered Address: </br></div>
3 Bina Court, </br>
2 Rickmansworth Road, Northwood,<br>
London, United Kingdom <br>
HA61HA</br>
<div class="subhead">Tel:<br></div>
([phone]<br>
<div class="subhead">Email:<br></div>
info#fareastfestival.com<br>
</div>
<div class="footcenter">
<h2>Our Sponsors</h2>
Coming Soon<br><br>
Become a Sponsor
</div>
<div class="footright">
<h2>Social Media</h2>
To find out the latest #FEF news, follow us on: <br>
<div class="subhead">Twitter:</div> #Fareastfestival<br>
<div class="subhead">Facebook:</div>/fareastfest<br>
<div class="subhead">instagram:</div>#fareastfest <br>
<div class="subhead">Pinterest:</div>fareastfestival<br><br>
<div id="socialfoot">
<img src="facebook.png" />
<img src="twitter.png" />
<img src="pinterest.png" />
<img src="instagram.png" />
</div><br>
#FarEastFest #FEF2016
</div>
</div>
</footer>
CSS:
#media (max-width: 600px) {
footer {
width: 100%;
clear: both;
text-align: center;
font-family: raleway;
font-size: 90%;
font-style: normal;
color: black;
font-variant: normal;
padding: 40px 0px;
background-color: lightgrey;}
.footwrap {
width: 100%;
display: block;
}
.footleft {
text-align: center;
width: 100%;
position: none;
top: none;
}
.footcenter {
text-align: center;
width: 100%;
padding: 0;
position: none;
top: none;
}
.footright {
text-align: center;
width: 100%;
padding: 0;
position: none;
top: none;
}
}
Any ideas what I can do?
See www.fareastfestival.com to view

Answer 1

#media (max-width: 600px) {
footer {
width: 100%;
clear: both;
text-align: center;
font-family: raleway;
font-size: 90%;
font-style: normal;
color: black;
font-variant: normal;
padding: 100px 0px;
background-color: lightgrey;}
.footwrap {
width: 100%;
display: block;
}
.footleft {
text-align: center;
width: 100%;
position: relative;
top:22px;
}
.footcenter {
text-align: center;
width: 100%;
padding: 20;
position: relative;
top:22px;
}
.footright {
text-align: center;
width: 100%;
padding: 20;
position: relative;
top:22px;
}
}

Answer 2

Update your CSS like this
.footwrap {
overflow: hidden;
width: 100%;
}
.footleft, .footcenter, .footright {
float: left;
text-align: left;
width: 33.33%;
}
#media (max-width: 600px) {
footer {
width: 100%;
clear: both;
text-align: center;
font-family: raleway;
font-size: 90%;
font-style: normal;
color: black;
font-variant: normal;
padding: 40px 0px;
background-color: lightgrey;
}
.footleft, .footcenter, .footright {
float: none;
text-align: center;
width: 100%;
}
}