@media screen and (max-width:481px){ #main, #subnav{ float:left; padding: 0; width:94%; margin: 3%; } } @media screen and (max-width: 960px){ .wrapper { width:640px; } } @media screen and (max-width: 640px) { .wrapper { width: 320px; } h1, h2, h3, h4, p { word-wrap: break-word; } #header{ padding: 0; } } body{ background-color: white; font-family: helvetica, arial, sans-serif; font-size: 18px; padding-top: 330px; } header{ width: 100%; height: 300px; background-color: forestgreen; text-align: center; position: relative; position: fixed; top: 0; overflow: hidden; h1{ font-size: 25px; color: #fff; line-height: 230px; text-transform: uppercase; font-weight: 100; @include transition(all .3s ease); } nav{ position: absolute; bottom: 0; height: 60px; line-height: 60px; width: 100%; background-color: rgba(0,0,0,.1); a{ color: white; display: inline-block; padding: 10px 15px; line-height: 1; text-decoration: none; @include border-radius(2px); &:hover{ } } } } .wrapper{ width: 800px; margin: 0 auto; } section{ padding: 20px; margin-bottom: 40px; background-color: #fff; } .fcc-btn { background-color: #199319; color: white; padding: 15px 25px; text-decoration: none; } .footer { position: absolute; bottom: 0; left: 0; z-index: 10; * { box-sizing: border-box; } } .column { float: left; width: 33.33%; padding: 5px; } .row::after { content: ""; clear: both; display: table; }