Помогите правильно разместить блок

$(document).ready(function() { 
  $('.menu-toggle').click(function() { 
    $('nav').toggleClass('active') 
  }) 
  $('ul li').click(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).toggleClass('active'); 
  }) 
})

body { 
  margin: 0; 
  padding: 0; 
  font-family: "Montserrat", sans-serif; 
  font-size: 14px; 
} 
 
.wrap { 
  width: 100%; 
} 
 
.container { 
  width: 1200px; 
  position: relative; 
  margin-right: auto; 
  margin-left: auto; 
} 
 
header { 
  top: 0; 
  left: 0; 
  padding: 0 100px; 
  background: #fff; 
  width: 100%; 
  box-sizing: border-box; 
} 
 
header .logo { 
  color: rgba(31, 32, 65, 0.5); 
  height: 50px; 
  line-height: 50px; 
  font-size: 24px; 
  float: left; 
  font-weight: bold; 
} 
 
header nav { 
  float: right; 
} 
 
header nav ul { 
  margin: 0; 
  padding: 0; 
  display: flex; 
} 
 
header nav ul li { 
  list-style: none; 
  position: relative; 
  transition: 0.5s; 
} 
 
header nav ul li.sub-menu:before { 
  content: ""; 
  font-family: fontAwesome; 
  position: absolute; 
  line-height: 50px; 
  color: rgba(31, 32, 65, 0.5); 
  right: 2px; 
} 
 
header nav ul li.active.sub-menu:before { 
  content: ""; 
} 
 
header nav ul li ul { 
  position: absolute; 
  left: 0; 
  background: rgba(31, 32, 65, 0.05); 
  display: none; 
} 
 
header nav ul li ul li { 
  display: block; 
  width: 200px; 
  transition: 0.5s; 
} 
 
header nav ul li a { 
  height: 50px; 
  line-height: 50px; 
  padding: 0 20px; 
  color: rgba(31, 32, 65, 0.5); 
  text-decoration: none; 
  display: block; 
  transition: 0.5s; 
} 
 
header nav ul li a:hover, 
header nav ul li a.active { 
  color: #fff; 
  background: #BC9CFF; 
} 
 
.content { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  align-items: center; 
} 
 
.content h1 { 
  margin: 0; 
  margin-bottom: 15px; 
} 
 
.content h2 { 
  margin: 0; 
  margin-bottom: 15px; 
} 
 
.content h3 { 
  margin: 0; 
  margin-bottom: 15px; 
} 
 
.content p { 
  margin: 0; 
} 
 
.navEnter span { 
  border: 2px solid #BC9CFF; 
  border-radius: 22px; 
  padding: 5px 18px; 
  color: #BC9CFF; 
  font-weight: bold; 
} 
 
.navEnter span:hover, 
.navEnter span.active { 
  color: #fff; 
  background: #BC9CFF; 
} 
 
.navEnter a:hover, 
.navEnter a.active { 
  color: none; 
  background: none; 
} 
 
.navReg span { 
  border: 2px solid #BC9CFF; 
  border-radius: 22px; 
  padding: 5px 18px; 
  color: #fff; 
  background: #BC9CFF; 
  font-weight: bold; 
} 
 
.navReg span:hover, 
.navReg span.active { 
  color: #BC9CFF; 
  background: #fff; 
} 
 
.navReg a:hover, 
.navReg a.active { 
  color: none; 
  background: none; 
} 
 
header nav ul li.active ul { 
  display: block; 
  transition: 0.5s; 
} 
 
.menu-toggle { 
  color: rgba(31, 32, 65, 0.5); 
  float: right; 
  line-height: 50px; 
  font-size: 24px; 
  cursor: pointer; 
  display: none; 
} 
 
@media (max-width: 991px) { 
  .container { 
    width: 100%; 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
  } 
  header { 
    padding: 0 20px; 
  } 
  header nav { 
    position: absolute; 
    width: 100%; 
    height: calc( 100vh - 50px); 
    top: 50px; 
    left: -100%; 
    transition: 0.5s; 
  } 
  header nav.active { 
    left: 0; 
  } 
  header nav ul { 
    display: block; 
    text-align: center; 
  } 
  header nav ul a { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
  } 
  header nav ul li.sub-menu:before { 
    right: 10px; 
  } 
  .menu-toggle { 
    display: block; 
  } 
  header nav ul li.active ul { 
    position: relative; 
    background: rgba(31, 32, 65, 0.05); 
  } 
  header nav ul li ul li { 
    width: 100%; 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <header> 
    <div class="logo">LOGO</div> 
    <nav> 
      <ul> 
        <li><a href="#">О Нас</a></li> 
        <li><a href="#">Услуги</a></li> 
        <li class="sub-menu"><a href="#">Вакансии</a> 
          <ul> 
            <li><a href="#">Link 1</a></li> 
            <li><a href="#">Link 2</a></li> 
            <li><a href="#">Link 3</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Новости</a></li> 
        <li class="sub-menu"><a href="#">Соглашение</a> 
          <ul> 
            <li><a href="#">Link 4</a></li> 
            <li><a href="#">Link 5</a></li> 
            <li><a href="#">Link 6</a></li> 
          </ul> 
        </li> 
        <li class="navEnter"><a href="#"><span>Войти</span></a></li> 
        <li class="navReg"><a href="#"><span>Зарегистрироваться</span></a></li> 
      </ul> 
    </nav> 
    <div class="menu-toggle"><i class="fa fa-bars"></i></div> 
  </header> 
</div> 
<div class="content"> 
  <h1>This one is the sub-section or widget title</h1> 
  <h2>Next one is the item title inside widgets</h2> 
  <h3>This is a label or CTA text</h3> 
  <p>This is the body text which is used for most of the design, like paragraphs, lists, etc.</p> 
</div>