Como criar um Website responsivo #3

body,html{
    margin:0px;
    padding:0px;
}
body{
    background-color:#DDD;
}
.wrapper{
    max-width:1170px;
    width:100%;
    background-color:white;
    margin:20px auto;
    text-align:center;
}
h1{
    text-align:center;
    margin:0px;
    padding:10px 0px;
    font-size:300%;
    color:#333;
}
a{
    color:black;
    text-decoration:none;
}
#content{
    font-size:0px; /* Para fazer com que as imagens não tenham espaços no meio (?) */
    text-align:center; /*Para centrar as imagens (quando ficar mais pequeno). */
}
.home_box{
    font-size:16px;
    display:inline-block;
    width:390px;
    padding-bottom:10px;
    vertical-align:top
}
.home_box img{
    width:390px;
    transition:all 0.5s ease-in-out;
}
.home_box h3{
    margin:3px 0px;
    text-align:center;
}
.home_box p{
    padding: 0px 6px;
    margin: 3px 0px;
}
footer { 
    background-color: #eee; 
    width: 100%; 
    text-align: center; 
    border-top:solid 5px #ddd; 
}
footer table{
    margin:auto;
    width:100%;
}
footer table td{
    padding-bottom:20px;
    width:32%;
    vertical-align:top;
    border-right:solid 1px #CCC;
}
footer table td:last-child{
    border:0px;
}
footer span, footer a{
    letter-spacing:2px;
}
 
footer .wrapper{
    margin-bottom:0px;
}
 
@media only screen and (max-width: 1200px) {
    .wrapper{
        margin:0px auto;
        padding:0px 7px;
        box-sizing:border-box;
    }
    .home_box{
        width:290px;
    }
    .home_box img{
        width:290px;
    }
    footer table{
        width:870px;
    }
}
 
@media only screen and (max-width: 900px) {
    h1{
        font-size:250%;
    }
    #content{
        padding-top:20px;
    }
    .home_box{
        width:100%;
        display:block;
    }
    .home_box img{
        width:100%;
        max-width:300px;
    }
    footer table td{
        display:block;
        width:100%;
        border-right:0px;
        border-bottom:solid 1px #CCC;
    }
    footer table td:last-child{
        border:0px;
    }
    footer table{
        width:100%;
    }
}
 
@media only screen and (max-width: 400px) {
    h1{
        font-size:200%;
    }
}
 
/* O código abaixo serve exclusivamente para o slider */
 
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
 
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}