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

Question

[Crushing]

Почему данный блок себя так ведет? prntscr.com/h8a879 Он прилипает к правому краю, хотя float не указан, родитель элемента при размере 820 растягивается на 70% от экрана и выравнивается по середине экрана по идее, но он ведет себя не так как нужно, сам элемент занимает 100% от родителя.

https://uzinouzi.github.io/Polind/ - Сама верстка.

Comments

[Алексей Дзюба]

Потом, может, посмотрю верстку. Напишите Where do you want to go - так грамматически правильно)

[Crushing]

Алексей Дзюба, так в макете было :)

Answer 1

[Даниил Попов]

Не прилипает к правому краю, а вылазит за пределы родителя. Это у вас так отступы удачно подобраны, чтобы создавалось впечатление, что он прилипает.
добавьте #searching{box-sizing: border-box;}
а картинку с лупой уж как-нибудь отцентруйте

Answer 2

[Ankhena]

Потому что ширина инпута больше ширины родителя.

Comments

[Crushing]

Ширина инпута 100%, больше может быть только засчет паддингов по бокам.

[Ankhena]

Crushing, да?
у нас с браузером написано, что ширина 720 точек

[Crushing]

Ankhena, Гляньте медиа выше

[Ankhena]

Crushing, ширина .seacrh_place (пишется search) 70% родителя.
Ширина #searching 100% от своего родителя + 88 точек паддингов.

[Ankhena]

Crushing, Разумно использовать модель box-sizing: border-box

[Crushing]

Ankhena, Уже понял это :) Спасибо.

P.S. Знаю как правильно пишется, просто случайно так написал.

[Ankhena]

Crushing, А по-хорошему, обертка .seacrh_place либо лишняя либо лупа должна быть внутри нее.

Answer 3

[dsemagin]

в медиа проблема, у вас родитель width = 70%, а сам элемент 720px
media (max-width: 830px){
#searching {
height: 60px;
width: 720px;
border: none;
border-radius: 25px;
padding-left: 44px;
padding-right: 44px;
}
}

Answer 4

[Crushing]

Все, нашел решение, сделал родительскому блоку ширину 100% при 820px; а инпуту 70%.