Я пытаюсь поместить кнопку и строку поиска посередине, но когда прописываю margin, то контейнер растягивается и выходит за пределы экрана и появляются ползунки. Как бороться с этой проблемой?
2 ответа
Попробуйте убрать отступы у body
и вместо использования margin
используйте display:flex;
body {padding: 0; margin:0;}
header {
/*Внешний вид*/
position: absolute;
background-color: red;
width:100%;
height:5rem;
/*Выравнивание*/
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
<header>
<div class="search">
<input type="text">
<button>Добавить объявление</button>
</div>
</header>
margin
это внешний отступ - он влияет на ширину не самого элемента, а его родителя. В общем, тут проблема подхода к реализации (проблема с осознанием смысла стилей, а не с их поведением).