Как сделать тело контента веб-сайта адаптивным ⇐ Html

[Anonymous]

У меня есть веб-сайт, который я пытаюсь сделать адаптивным. Когда я применяю @media only screen и (минимальная ширина: 180 пикселей) и (максимальная ширина: 267 пикселей), область содержимого обрезается с правой стороны. Ниже приведен CSS, который я применяю к странице.
Пожалуйста, что я делаю не так?
Спасибо.
CSS

Код: Выделить всё

.content_body{
margin: 0 auto;
width: 100%;
overflow: hidden;
padding-top: 30px;
background:    #C9C7BB;
color:    #555;
font-family:  Tahoma, Arial, sans-serif;
font-size:    14px;
min-height: 200px;
}

.bio_wrapper{
line-height: 25px;
padding: 20px 0px 500px 50px;
}

.bio_left{
width: 800px;
float: left;
font-family: lato;
color: black;
}

.bio_images{
margin: 0;
margin-top: 30px;
margin-bottom: 90px;
}

.bio_images li{
padding-right: 35px;
display: inline;
list-style-type: none;
}

.bio_images li:last{
padding-right: none;
}

.bio_images img{
border: 4px solid #999966;
border-radius: 5px;
}

.bio_mainimage{
float:right;
width: 20%;
}

@media only screen and (min-width: 180px) and (max-width: 267px) {

.bio_mainimage{
display: none;
}

.content_body{
margin: 0 auto;
width: 50%;
overflow: hidden;
padding-top: 30px;
background:    #C9C7BB;
color:    #555;
font-family:  Tahoma, Arial, sans-serif;
font-size:    14px;
min-height: 200px;
}

.bio_images img{
display: block;
}
}

Пример страницы

Подробнее здесь: https://stackoverflow.com/questions/143 ... responsive