Помогите выровнять блоки сайта

body { 
  background-image: url(bananas.png); 
  margin: 0; 
} 
 
h1 { 
  color: black; 
  background-color: yellow; 
  margin-left: 10px; 
  margin-right: 10px; 
  border-radius: 20px; 
} 
 
.header_top { 
  background-color: black; 
  height: 8px; 
  position: relative; 
  top: 23px; 
  margin-left: 10px; 
  margin-right: 10px; 
  border-radius: 50px; 
} 
 
.header_bottom { 
  background-color: black; 
  height: 8px; 
  position: relative; 
  top: -23px; 
  margin-left: 40px; 
  margin-right: 40px; 
  border-radius: 10px; 
} 
 
.box { 
  background-color: yellow; 
  height: 200px; 
  border-radius: 8px; 
  border: 2px; 
  opacity: 0.6; 
  margin-left: 11px; 
  margin-right: 11px; 
  margin-top: 2px; 
} 
 
.box_out { 
  border: 2px solid black; 
  border-radius: 10px; 
  height: 200px; 
  margin-left: 9px; 
  margin-right: 9px; 
  margin-top: -202px; 
} 
 
.box_left { 
  background-color: yellow; 
  height: 205px; 
  border-radius: 8px; 
  border: 2px; 
  opacity: 0.6; 
  margin-left: 10px; 
  margin-right: 310px; 
  margin-top: 20px; 
} 
 
.box_left_out { 
  border: 2px solid black; 
  border-radius: 10px; 
  height: 205px; 
  margin-left: 9px; 
  margin-right: 308px; 
  margin-top: -207px; 
} 
 
.box_right { 
  background-color: yellow; 
  height: 205px; 
  border-radius: 8px; 
  border: 2px; 
  opacity: 0.6; 
  margin-left: 300px; 
  margin-right: ; 
  margin-top: ; 
} 
 
.box_right_out { 
  border: 2px solid black; 
  border-radius: 10px; 
  height: 205px; 
  margin-left: 180px; 
  margin-right: ; 
  margin-top: ; 
}

<div align="center" class="header_top"></div> 
 
<div align="center" class="osnova"> 
  <h1>rob1nz</h1> 
</div> 
 
<div align="center" class="header_bottom"></div> 
 
<div aling="center" class="box"></div> 
<div aling="center" class="box_out"></div> 
 
<div aling="center" class="box_left"></div> 
<div aling="center" class="box_left_out"></div> 
 
<div align="center" class="box_right"></div> 
<div align="center" class="box_right_out"></div>