Подскажите как позиционировать данный header

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.item { 
  width: 100vw; 
  height: 100vh; 
  position: relative; 
  background: url(https://i.stack.imgur.com/rrOnw.jpg); 
  background-size: cover; 
} 
 
.item:after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.8); 
} 
 
.menu { 
  background: #131313; 
  height: 50px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 10; 
} 
 
.item1 { 
  width: 40%; 
} 
 
.item1 .svg { 
  display: block; 
  width: 152px; 
  margin: auto; 
} 
 
.item2 { 
  display: flex; 
} 
 
.menu a { 
  display: block; 
  color: #999; 
  text-decoration: none; 
  margin-right: 10px; 
  position: relative; 
} 
 
.menu a:hover { 
  color: #fbfbfb; 
} 
 
.menu a:hover:after { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: -14px; 
  left: 0; 
  border-top: 2px solid #ea2935; 
  border-bottom: 2px solid #ea2935; 
  padding: 11px 0; 
} 
 
.item-inner { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 80%; 
  text-align: center; 
  z-index: 100; 
} 
 
p:nth-of-type(1) span { 
  font-size: 24px; 
} 
 
p:nth-of-type(1) span:nth-of-type(1) { 
  color: #fff; 
} 
 
p:nth-of-type(1) span:nth-of-type(2) { 
  color: #ea2935; 
} 
 
p:nth-of-type(2) { 
  padding: 40px 0; 
  color: #fbfbfb; 
} 
 
.item-inner a { 
  text-decoration: none; 
} 
 
.item-inner a:nth-of-type(1) { 
  background: #ea2935; 
  color: #fbfbfb; 
  text-transform: uppercase; 
  padding: 12px 20px; 
} 
 
.item-inner a:nth-of-type(2) { 
  background: #222; 
  color: #fbfbfb; 
  text-transform: uppercase; 
  padding: 12px 20px; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 
 
<div class="menu"> 
  <div class="item1"> 
    <div class="svg"> 
      <svg viewbox="0 0 150 100"> 
      <path d="M0,0 148,0 148,50 130,100 20,100 0,50z"  fill="#0C0E14" stroke=" #ea2935" stroke-width="2px"/> 
      <text x="30px" y="80px" fill="#fff" stroke="none" style="font-size:22px;font-family:sans-serif;">Creativia</text> 
    </svg> 
    </div> 
  </div> 
  <div class="item2"> 
    <a href="#">home</a> 
    <a href="#">about</a> 
    <a href="#">portfolio</a> 
    <a href="#">clients</a> 
    <a href="#">team</a> 
    <a href="#">services</a> 
    <a href="#">blog</a> 
    <a href="#">contacts</a> 
  </div> 
</div> 
<div class="item"> 
  <div class="item-inner"> 
    <p> 
      <span>lorem</span> 
      <span>ipsum</span> 
    </p> 
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis asperiores reiciendis architecto veniam aliquid velit sed cumque necessitatibus quas iste! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, culpa!</p> 
    <p> 
      <a href="#">features</a> 
      <a href="#">free psd</a> 
    </p> 
  </div> 
</div>