Почему изображение на сайте не адаптивно, сласс меню не съезжает вниз, а просто уходит за горизонт?

Question

[Genanadi]

HTML на скрине

А вот css

*{
	font-family:sant-serif;
	margin: 0 ;
}/* общий селектор */
.header{
	min-height:140px;
	background-color:#FEDF9C;
}
.logo{width:100px;}
.wrapper{
	width:1024px;
	height:inherit;/
	margin: 0 auto;
	overflow:hidden;
}
.wrapper img{width:300px; float:left;padding:0px 0px 0px 30px;}
.menu1{padding-top:110px;}
.menu1 li {display:inline;}
.menu{color:#000000;padding: 8px 15px 8px 15px;border: 2px inset #F1592A;text-decoration:none;overflow:hidden;}
.menu1 a:hover{background:#F1592A;}

Comments

[Дмитрий Кузнецов]

По правилам сервиса: Код должен находиться в специальном теге. Поправьте вопрос иначе вопрос будет удалён.

[Ankhena]

А еще лучше сделайте песочницу на jsfiddle.net, чтобы нам не компилировать код в голове.

Пока делайте подумайте вот над чем:
Вы задаете картинке width 300px. С чего она станет адаптивной?
(Если у вас вопрос почему не 100px, то почитайте про вес (специфичность) селекторов)

Аналогично с шириной обертки, .wrapper - фиксированная ширина 1024px.
При изменении ширины браузера, ширина wrapper не меняется. Почему что-то внутри должно адаптироваться?

[Евгений]

закиньте код на jsfiddle