Разместить логотип между навигацией

Question

header {
  background: #2E2C2C;
  font-family: 'IBM Plex Sans', sans-serif;
  position: absolute;
  width: 1920px;
  height: 70px;
  left: 0px;
  top: 0px;
}

.header_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pic {
  position: absolute;
  width: 113.73px;
  height: 113.73px;
  left: 903.14px;
  top: 13.14px;
  border-radius: 100px;
}

.nav {
  text-transform: uppercase;
  font-size: 16px;
  padding-left: 389px;
  padding-top: 23px;
}

.nav_i {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  margin: 0 40px;
}

<header>
  <div class="header">
    <img alt="logo" src="pic/image 1.png" class="pic">
    <nav class="nav">
      <a class="nav_i" href="#">Home</a>
      <a class="nav_i" href="#">Membership</a>
      <a class="nav_i" href="#">Publications & Merchandise</a>
      <a class="nav_i" href="#">Small Grants & Awards</a>
      <a class="nav_i" href="#">Conference</a>
      <a class="nav_i" href="#">OhioBioBlitz</a>
    </nav>
  </div>
</header>

Вот так должно получиться

Answer 1

Тэг img разместить внутри тега nav и убрать position: absolute; у класса .pic

header {
  background: #2E2C2C;
  font-family: 'IBM Plex Sans', sans-serif;
  position: absolute;
  width: 1920px;
  height: 70px;
  left: 0px;
  top: 0px;
}

.header_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pic {
  width: 113.73px;
  height: 113.73px;
  left: 903.14px;
  top: 13.14px;
  border-radius: 100px;
}

.nav {
  text-transform: uppercase;
  font-size: 16px;
  padding-left: 389px;
  padding-top: 23px;
}

.nav_i {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  margin: 0 40px;
}

<header>
  <div class="header">

    <nav class="nav">
      <a class="nav_i" href="#">Home</a>
      <a class="nav_i" href="#">Membership</a>
      <a class="nav_i" href="#">Publications & Merchandise</a>
      <img alt="logo" src="https://i.stack.imgur.com/pmjqr.png" class="pic">
      <a class="nav_i" href="#">Small Grants & Awards</a>
      <a class="nav_i" href="#">Conference</a>
      <a class="nav_i" href="#">OhioBioBlitz</a>
    </nav>
  </div>
</header>

БЛОГ НА HUSL

Разместить логотип между навигацией

Ответы (1 шт):