Как сделать, чтоб margin не влиял на ширину div'a

Question

Я пытаюсь поместить кнопку и строку поиска посередине, но когда прописываю margin, то контейнер растягивается и выходит за пределы экрана и появляются ползунки. Как бороться с этой проблемой?

Answer 1

Убрать width: 100% и больше не писать бесполезный код.

Answer 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>

БЛОГ НА HUSL

Как сделать, чтоб margin не влиял на ширину div'a

Ответы (2 шт):