Как это сверстать?

246

21 октября 2018, 00:00

Есть макет и мне интересно как можно сверстать навигацию(белый блок сверху). Размер макета 1600px, а отступы по 210px, получается размер контента(центровщика) - 1180px. Я тут подумал как сделать лучше и ничего придумать не могу. Делать ли с центровщиком или без, если без, то лого нужно margin-left писать.

Что посоветуете ?

Макет:

Answer 1

body { 
  background-color: #f7f7f7; 
} 
.header { 
  width: 100%; 
  height: 50px; 
  background-color: black; 
} 
 
.header__inner { 
  position: relative; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
  max-width: 1200px; 
  margin: 0 auto; 
} 
.header__inner::after { 
  position: absolute; 
  top: 0; 
  right: 200px; 
  height: 100%; 
  width: 100vw; 
  background-color: white; 
  content: ''; 
} 
.header__logo-holder, 
.header__menu-holder { 
  z-index: 3; 
} 
.header__menu-holder { 
  color: white; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"/> 
<header class="header"> 
  <div class="header__inner"> 
    <div class="header__logo-holder"> 
      Logo 
    </div> 
    <div class="header__menu-holder"> 
      Menu 
    </div> 
  </div> 
</header>