Блок интеракции внутри блока с картинкой

Question

Есть блок внутри блока с картинкой в макете. При попытке добавить внешние отступы дочернему блоку, картинка сдвигается и возникает отступ от хедера. При этом, если расположить внутри блока с картинкой текст, проблема исчезает.

Последнее изображение - как должно быть.

.start {
  width: 1440px;
  height: 640px;
  background-image: url(https://img.freepik.com/free-vector/beautiful-watercolor-background_23-2148486848.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1703203200&semt=sph);
  background-size: cover;
}

.start-block {
  background-color: #fff;
  padding: 55px 77px;
  width: 416px;
  height: 198px;
  margin: 50px;
}

<div class="start">
  <div class="start-block">
    <p>Say Hello to ToyStore!</p>
    <h1>Free Ecommerce Template for Webflow</h1>
    <button type="submit">Open Catalog</button>
  </div>
</div>

БЛОГ НА HUSL

Блок интеракции внутри блока с картинкой

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