archelon

<header>
  <div class="container d-flex">
    <img class="col-1" src="logo.svg">
    <div class="col-11">
      <div class="container d-flex flex-wrap justify-content-right">
        <form class="col-12 col-lg-auto mb-3 mb-lg-0 poisk_form">
          <input type="search" class="form-control" placeholder="ПОИСК..." aria-label="Поиск">
        </form>
        <ul class="nav justify-content-right">
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector.svg"></a></li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector2.svg"></a></li>
          <li class="nav-item-number nav-link link-dark">8 (381) 233-50-35</li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="корзина.svg"></a></li>
        </ul>
      </div>
      <nav class="container flex-wrap">
        <ul class="nav justify-content-right">
          <li class="nav-item-burger"><img src="burger.svg"></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2" aria-current="page">Каталог</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Новинки</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Акции</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Доставка</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">О нас</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Контакты</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="one"></div>
  <div class="two"><div class="pocket"></div></div>

body {
  display: flex;
}
.one {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.pocket {
  position: absolute;
  left: -50px;
  height: 100px;
  width: 100px;
  border: 1px solid;
}

.two {
  position: relative;
  overflow:hidden;
  width: 200px;
  height: 200px;
  background-color: blue;
}

span {
 margin-left: -4px; 
}

p {
 display: flex;
}

.news-category-view > a {
  border: black 1px solid;
  padding: 10px;
}

html {
    min-height: 100%;
}
body {
    min-height: 100vh;
    display: flex;
}
.main {
    margin: auto;
}

.registration__step-item:after {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    width: 10px;
    height: 100%;
    right: -7px;
    top: 0;
    transform: skew(10deg);
  }

li {
list-style: none;
padding-left: 30px;
background-image: url(icons/bullet.svg);
background-repeat: no-repeat;
background-position: left center;
}

.nav-item:before {
  content: "";
  width:1px;
  height: 50px;
  background-color: #777;
  transform:rotate(35deg);
}