Не получается настроить ширину блока?

Question

[omerkhan]

Здравствуйте. Блок header не занимает 100% от ширины когда делаю адаптивную верстку. Viewport установлен и я дал значение none для margin, padding и float. Но не помогает. Что делать?

Код:
.login input[type = "text"], .login input[type = "password"]{
width: 35%;
border: none;
outline: none;
padding: 7px;
margin-right: 20px;
}
.registration form input[type = "text"], .registration form input[type = "password"]{
border: none;
outline: none;
border: solid 1px #f9f9f9;
padding: 10px;
margin-top: 20px;
width: 20%;
}
.find-password input[type = "text"]{
width: 77%;
padding: 8px;
}
*{
margin: 0;
padding: 0;
}
body{
background-color: #e7ecf2;
min-width: 100%;
}
.main{
width: 100%;
}
.header{
background-color: #3b5999;
font: bold normal 200% sans-serif;
color: #fff;
height: 130px;
}
.header h1{
padding: 50px 0 0 10%;
width: 300px;
margin-right: 0;
}
.login{
width: 700px;
float: right;
margin: -3.2% 15% 0 0;
}
.form{
float: right;
margin-right: -100px;
width: 500px;
}
.btn{
background-color: #667baf;
cursor: pointer;
padding: 7px;
color: #fff;
}
.forgot{
text-align: right;
float: right;
margin-top: 25px;
margin-right: -305px;
}
.forgot a{
font-family: 'trebuchet ms';
font-size: 0.35em;
color: #e3dddd;
text-decoration: none;
}
.img{
margin: -40px 150px 0 60px;
float: left;
}
.img img{
width: 650px;
}
.registration{
margin-top: 40px;
margin-left: 30px;
}
.registration h1{
color: #2b333c;
font-size: 350%;
font-family: 'century gothic';
font-weight: 1100;
margin: 0 0 7px 0;
}
.registration h3{
font-weight: 400;
word-spacing: 10px;
}
.registration form button{
font-size: 1.2em;
background-color: #65a64c;
padding: 10px 25px;
color: #fff;
outline: none;
border-radius: 10px;
}
.find-password{
padding: 5%;
background-color: #f9f9f9;
margin: 0 520px 0 0;
}
media only screen
and (min-device-width: 320px)
and (max-device-width: 568px){
.header{
width: 100%;
float: none;
}
.header h1{
margin: 0;
padding: 0;
}
.form{
float: none;
margin: 0;
padding: 0;
}
.login{
float: none;
margin: 0;
padding: 0;
}
.login input[type = "text"], .login input[type = "password"]{
width: 35%;
border: none;
outline: none;
padding: 7px;
margin: 0 0 0 30%;
}
.registration{
width: 100%;
}
.registration form input[type = "text"], .registration form input[type = "password"]{
width: 50%;
}
.img{
width: 100%;
margin: 0;
padding: 0;
}
}

Answer 1

[Геннадий]

Посмотрите стили вашей картинки. Явно, что проблемы из-за неё:

.img img{
width: 650px;
}

При том, что на скрине, ширина экрана у вас 375px и для остальных элементов у вас установлена процентовка.
То есть, вы задаете ширину 100% для класса .img (при media), но при этом в общем указываете ширину 650px для тега img

.img img{
width: 650px;

img 650px.
.img{
width: 100%;
margin: 0;
padding: 0;
}
}

Comments

[omerkhan]

Да, спасибо большое