Прижать футер к низу страницы - HTML, CSS

header {
width: 100%;
background: white;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
padding: 15px 0;
margin-bottom: 30px;
position: relative;
}
nav {
width: 100%; 
}
/* логотип */
.logo {
display: block; 
float: left;
}
.logo span {
color: white;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 5px 0;
text-align: center;
text-shadow: 2px 2px 1px rgba(0,0,0,.4);
}
.logo span:nth-child(odd) {
background: #EF5A42;
}
.logo span:nth-child(even) {
background: #F8B763;
}
/* меню */
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-right: 30px;
}
#menu a {
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a:hover {
color: #EF5A42;
}
#menu li:last-child  {
margin-right: 0;
}
footer {
padding: 30px 0;
background: #3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}

footer {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding: 30px 0;
  background: #3C3D41;
  color: white;
}

*, *:after, *:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/
}
ul {
    list-style: none;
}
input{
    outline: none;
}
a {
    text-decoration: none;
    outline: none;
}
img {
    display: block;
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
}
body {
    font-family: sans-serif,Arial;
    font-size: 14px;
    line-height: 1;
    color: #373737;
    background: #f7f7f7;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
    content: "";
    display: table;
    clear: both;
}
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    padding: 0 15px;
}

footer{
     position: absolute;
     bottom: 0;
     width: 100%;
}

footer{
     position: absolute;
     bottom: 0;
     width: 100%;
}