Не получается сверстать навбар

Question

body, h1, h2,h3,h4, p,a {
    margin: 0;
    font-size: 100%;
    font-weight: normal;
  }

@font-face {
  src: url(../fonts/NeueMachina-Regular.woff);
  font-family: "neuenormal";
  font-weight:normal;
}
  
@font-face {
  src: url(../fonts/NeueMachina-Ultrabold.woff);
  font-family: "neuebold";
  font-weight: bold;
}

  .holst {
      /*background: url(../img/back.jpg) center no-repeat;*/
      background-size: cover;
      background-color: darkslategrey;
      
  }

  .border {
    border: solid;
    border-width: 2px;
    border-color: white;
    border-top: none;
    border-bottom: none;
    width: 1400px;
    margin:0 auto;
  }

  .header {
    font-family: AvenirNext;
    list-style: none;
    text-transform: uppercase;
  }
  
  .ul {
    display: flex;
    justify-content: space-evenly;
    border: solid;
    margin: 0;
    padding: 0;
    border-width: 2px;
    border-color: white;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  
  a {
    text-decoration: none;
    color:white;
  }

  .textheader {
    color:white;
    font-size: 30px;
    list-style: none;
    font-family: neuebold;
    
  }

  a {
    border: solid;
    border-width: 2px;
    border-left: none;
  }

  .navbar {
    padding:0 0 300px 0;
  }
  
  .smm {
    text-transform: uppercase;
    font-family: neuebold;
    font-size:120px;
    -webkit-text-stroke: 2px #FC4C24;
  }

  .contacts {
    border-right: none;
  }

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teleginsmm</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<div class="holst">
  <div class="border">
    <header class="header">
      <nav class="navbar">
        <ul class="ul">
          <li class="textheader"><a class="logo">teleginsmm</a></li>
          <li class="textheader"><a>кто</a></li>
          <li class="textheader"><a>зачем</a></li>
          <li class="textheader"><a>услуги</a></li>
          <li class="textheader"><a class="contacts">контакты</a></li>
        </ul>
      </nav>
    </header>
    <div class="secondpage">
      <p class="smm">smm</p>
    </div>
  </div>
</div>

Как сделать такой навбар? Не получается сделать отступ от границы.

Answer 1

Не до конца понятна суть вопроса, но если вам нужен отступ сверху от навбара, то вы можете установить цвет фона body/* такой какой вам нужен, а затем сделать отступ margin для контейнера 'holst'. Тому-же контейнеру можно с нужных сторон добавить обводку нужной толщины и цвета, что-бы сымитировать отступ.

upd: если нужно отодвинуть текст от разграничения блоков навбара, то вам следует присваивать свойства padding тегам 'a' находящимся внутри 'li'.

body,
    h1,
    h2,
    h3,
    h4,
    p,
    a {
        margin: 0;
        font-size: 100%;
        font-weight: normal;
        background: grey;
        /* фон */
    }

    @font-face {
        src: url(../fonts/NeueMachina-Regular.woff);
        font-family: "neuenormal";
        font-weight: normal;
    }

    @font-face {
        src: url(../fonts/NeueMachina-Ultrabold.woff);
        font-family: "neuebold";
        font-weight: bold;
    }

    .holst {
        margin: 10px;
        /* отступ */

        /* 
    border-top: 10px solid grey;
    border-right: 10px solid grey;
    border-left: 10px solid grey; 
    если не подходит вариант с отступом, то вот вариант обводки ↑ */

        background-size: cover;
        background-color: darkslategrey;

    }
    
.border {
    border: solid;
    border-width: 2px;
    border-color: white;
    border-top: none;
    border-bottom: none;
    width: 1400px;
    margin:0 auto;
  }

  .header {
    font-family: AvenirNext;
    list-style: none;
    text-transform: uppercase;
  }
  
  .ul {
    display: flex;
    justify-content: space-evenly;
    border: solid;
    margin: 0;
    padding: 0;
    border-width: 2px;
    border-color: white;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  
  a {
    text-decoration: none;
    color:white;
  }

  /* укажите тег 'a' вместе, с классом 'textheader' */
  .textheader, a {
    color: white;
    font-size: 30px;
    font-family: neuebold;
    padding-right: 5px; /* отступ */
    list-style: none;
}

  a {
    border: solid;
    border-width: 2px;
    border-left: none;
  }

  .navbar {
    padding:0 0 300px 0;
  }
  
  .smm {
    text-transform: uppercase;
    font-family: neuebold;
    font-size:120px;
    -webkit-text-stroke: 2px #FC4C24;
  }

  .contacts {
    border-right: none;
  }

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teleginsmm</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<div class="holst">
  <div class="border">
    <header class="header">
      <nav class="navbar">
        <ul class="ul">
          <li class="textheader"><a class="logo">teleginsmm</a></li>
          <li class="textheader"><a>кто</a></li>
          <li class="textheader"><a>зачем</a></li>
          <li class="textheader"><a>услуги</a></li>
          <li class="textheader"><a class="contacts">контакты</a></li>
        </ul>
      </nav>
    </header>
    <div class="secondpage">
      <p class="smm">smm</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Не получается сверстать навбар

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