Нужна помощь с адаптивностью

[IvanRu08]

Пытаюсь свою верстку сделать адаптивной, но никак не получается. Решил начать с подвала. Нужно, чтобы на ширина 1020px и ниже все элементы становились друг по дружкой и центрировались. Как такое можно реализовать? Уже все перепробовал. Может неправильно верстаю? Вот верстка: http://cm04741.tmweb.ru/index.html

Вот код футера:

<footer>			<section class="footer-inside">				<div class="counter"><img src="images/liveinternet.png" alt="Счетчик посещений"></div>				<div class="copyright">© 2010 - 20** Добро пожаловать в <a href="#">уголок веб-дизайнера.</a></div>				<ul class="menu-bottom">					<li><a href="#">О проекте</a></li>					<li><a href="#">Контакты</a></li>					<li><a href="#">Все статьи</a></li>				</ul>				<div class="social-buttons">					<a href="#" class="rss"></a>					<a href="#" class="twitter"></a>					<a href="#" class="facb"></a>					<a href="#" class="gplus"></a>				</div>			</section>		</footer>

А вот стили: 

footer{    margin: 50px 0 0 0;    border-top: 1px dashed #ccc;    border-bottom: 9px solid #fdc300;    color: #979ea0;    padding: 0 0 23px 0;}footer a {    color: #979ea0;    border-bottom: 1px solid #e3e3e3;}footer a:hover {    border-bottom: none;}.footer-inside {    margin: 0 auto;    max-width: 1020px;}.counter {    float: left;    margin: 33px 0 0 0;}.counter img {    border-radius: 0;}.copyright {    margin: 35px 0 0 27px;    float: left;}.menu-bottom {    margin: 35px 0 0 60px;    float: left;}.menu-bottom li {    display: inline-block;    margin: 0 22px 0 0;}.social-buttons {    float: left;    margin: 35px 0px 0px 34px;}.social-buttons a {    border: none;    width: 25px;    height: 24px;    display: inline-block;    margin: 0 0px 0 4px;}a.rss {    background: url(images/rss-sprite.png) no-repeat;}a.twitter {    background: url(images/twitter-sprite.png) no-repeat;}a.facb {    background: url(images/facb-sprite.png) no-repeat;}a.gplus {    background: url(images/gplus-sprite.png) no-repeat;}a.rss:hover, a.twitter:hover, a.facb:hover, a.gplus:hover {    background-position: -25px 0;}/*Стили на адаптивность*/@media screen and (max-width: 1020px) {}

Может мне стоить что-нибудь почитать на эту тему? Заранее спасибо!

Edited August 28, 2015 by IvanRu08

[Нарек]

display:block им, float:none; ну и центрировать margin: *px auto;

[IvanRu08]

display:block им, float:none; ну и центрировать margin: *px auto;

Спасибо, все оказалось проще, чем я думал