Панель навигации с сеткой css не выровняется

Question

Поэтому я пытаюсь создать простую навигационную панель с lo go справа и меню и опцией поиска слева. Однако я не могу понять, как их вертикально выровнять. Я чувствую, что это, вероятно, легко исправить, но я просто не могу понять это. Это для школьного задания.

Вот мои html & css

.main-nav {
  display: inline;
  text-align: center;
  padding: 10px 0px 10px 0px;
  margin-top: 20px;
}

.main-nav li {
  display: inline;
  border: none;
}

.main-nav a {
  padding: 10px;
}

.navbardesk {
  display: grid;
  grid-template-areas: "logo links search";
  justify-content: center;
  background-color: rgba(141, 125, 31, 0.9);
}

.logo {
  display: inline-block;
  grid-area: logo;
  top: auto;
  bottom: auto;
}

.main-nav {
  grid-area: links;
  background-color: transparent;
}

.searchicon {
  grid-area: search;
  justify-content: center;
}

<div class="navbardesk v-align">
  <h1 class="logo">Buurtsuper Leo van der Drift</h1>

  <ul class="main-nav" id="js-menu">
    <li><a href="" class="nav-links">Home</a></li>
    <li><a href="" class="nav-links">Over ons</a></li>
    <li><a href="" class="nav-links">Kantoren en bedrijven</a></li>
    <li><a href="" class="nav-links">Bestellen</a></li>
    <li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
  </ul>

  <i class="fas fa-search searchicon"></i>
</div>

в данный момент выглядит так

и я хочу, чтобы это выглядело как это

Answer 1

Удалите поля h1 и ul и попробуйте фрагмент ниже.

.main-nav {
  display: inline;
  text-align: center;
  padding: 10px 0px 10px 0px;
  margin-top: 20px;
}

.main-nav li {
  display: inline;
  border: none;
}

.main-nav a {
  padding: 10px;
}

.navbardesk {
  display: grid;
  grid-template-areas: "logo links search";
  justify-content: center;
  background-color: rgba(141, 125, 31, 0.9);
  align-items: center;
  padding: .5rem;
}

.logo {
  display: inline-block;
  grid-area: logo;
  top: auto;
  bottom: auto;
  border: solid;
  margin: 0;
  padding: 0;
}

.main-nav {
  grid-area: links;
  background-color: transparent;
  border: solid;
  margin: 0;
  
}

.searchicon {
  grid-area: search;
  justify-content: center;
}

<div class="navbardesk v-align">
  <h1 class="logo">Buurtsuper Leo van der Drift</h1>

  <ul class="main-nav" id="js-menu">
    <li><a href="" class="nav-links">Home</a></li>
    <li><a href="" class="nav-links">Over ons</a></li>
    <li><a href="" class="nav-links">Kantoren en bedrijven</a></li>
    <li><a href="" class="nav-links">Bestellen</a></li>
    <li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
  </ul>

  <i class="fas fa-search searchicon"></i>
</div>

Answer 2

убедитесь, что ваш li, тег должен отображаться: inline-block он не будет работать с полем, отступ в inline display.

Answer 3

Я полагаю, что это даст именно то, что вы ищете, возможно, вам понадобятся некоторые изменения в зависимости от вашей ситуации

#js-menu {

    grid-template-columns: repeat(4,200px);
    background-color: #f3f3ec;
    justify-items: end;
    align-items: center;
    display: grid;

}

поместите эту строку кода вместе с другими css. Есть много способов обойти!

Answer 4

Я не могу воспроизвести ошибку, учитывая предоставленный вами код, но добавление align-items:center; должно делать то, что вы хотите.

    .navbardesk{
    display: grid;
    grid-template-areas: "logo links search";
    justify-content: center;
    align-items:center;
    background-color: rgba(141,125,31,0.9);    
   }