Вопрос по верстке. Не понимаю как сверстать сайт

html, body { 
   margin: 0; 
   padding: 0; 
   font-family: Arial, sans-serif; 
} 
 
.header-main { 
   height: 360px; 
   background-image: url(https://i.stack.imgur.com/HiWEK.jpg); 
   background-size: cover; 
   background-position: center center; 
   color: white; 
} 
 
.header-main > h1 { 
  text-align: center; 
  margin: 0; 
  padding: 60px 0; 
} 
 
.section-1 { 
  /* Вся суть здесь */ 
  width: 400px; 
  margin: -180px auto 8px; 
 
  height: 400px; 
  box-shadow: 0 0 4px black; 
  background-color: #f2f2f2; 
}

<header class="header-main"> 
  <h1>Добро пожаловать</h1> 
</header> 
<section class="section-1"> 
  Привет, мир<br/> 
  <img src="https://i.stack.imgur.com/oqrem.jpg" alt="" /> 
</section>