Я создал панель навигации с липким верхом, которая работает нормально. Я добавил поля 15vw на левое боковое изображение lo go, и я пытаюсь сделать то же самое справа, но это не сработает, и я не знаю почему. Я уверен, что это простое решение, но я новичок в этом!
HTML:
<!-- Navigation Bar -->
<nav class="navbar">
<a class="nav-logo" href="index.html"><img src="https://i.imgur.com/1LnAM3W.png" title="Home" height="50px"></a>
<b class="filler"></b>
<a id="about-us" class="nav-link" href="about_us.html">About Us</a>
<a id="our-mentors" class="nav-link active" href="our_mentors.html">Our Mentors<a/>
<a id="bookings" class="nav-link" href="bookings.html">Bookings</a>
<a id="contact" class="nav-link" href="contact_us.html">Contact</a>
</nav>
CSS:
/* The navigation bar */
.navbar {
display: grid;
grid-template-rows: 55px;
grid-template-columns: max-content 1fr max-content max-content max-content max-content;
grid-template-areas: "nav-logo filler about-us our-mentors bookings contact-us";
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
}
.nav-logo {
grid-area: "nav-logo";
position: fixed;
margin-left: 15vw;
}
.filler { grid-area: filler;
background: white }
#about-us { grid-area: about-us }
#our-mentors { grid-area: our-mentors }
#bookings { grid-area: bookings }
#contact-us { grid-area: contact-us;
margin-right: 15vw }
" contact-us "- это элемент сетки в крайнем правом углу, но поле не будет применяться к нему, как это делает lo go. Также я не использую bootstrap. Есть мысли?