Почему один элемент не поддается общей адаптивной верстке?

Question

[istasiik]

Есть такое вот поле для ввода - поиск:


Оно, почему то, не уменьшается, как это делают все, с небольшими полями по бокам,



а уходит вправо, появляется полоса прокрутки, и если прокрутить оно будет прилипшим к правому краю экрана



Вот HTML:

<div class="search">
<div class="icon"><img alt="" src="img/search.png"></div>
<input class="pole" placeholder="Поиск среди ваших и подходящих комплектов" type="text"> 
</div>

Вот CSS:

.container .search {
position: relative;
padding-top: 100px;
padding-bottom:40px;

margin: 0 0 10px 0;
margin:0px;
width:100%; 
max-width: 592px;



}

.container .search .pole {
height:37px; 
line-height:18px;
font-family: 'proxima_nova_ltlight'; 
width:100%; 

font-size:15px; 
padding:0 40px 0 40px;
border-color: #dddddc; 
border-width: 1px;
border-style: solid;
border-radius:50px;
}

.search .icon { 
position:absolute;
padding-top: 12px;
padding-left: 15px;

}


textarea:focus, input:focus{
outline: none;
}

Answer 1

[Евгений Петров]

Потому, что правило width задаёт ширину контента, куда padding и border не входят. Есть правило box-sizing для других случаев.

Comments

[istasiik]

Спасибо!