Есть элемент .navbar, которому задано свойство position: fixed и нужно, чтобы этот элемент был прижат к краю блока .wrapper, но когда я задаю для .navbar свойство width: 100%, то он уходит за пределы экрана, причем начало берет от левого края wrapper-а. Как сделать так, чтобы ширина .navbar упиралась в ширину wrapper-а и при уменьшении ширины экрана .navbar оставался прижатым к краю блока-обертки?
PS navbar обозначен красным, чтобы лучше понимать, где его границы
Сам сайт http://cc48161.tmweb.ru/
Весь код jsfiddle.net/09qc4kLt/
Как надо
.navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
background-color: red;
width: 100%;
}
<nav class="navbar">
<ul>
<li>
<a href="#" class="arrow up"><i class="far fa-arrow-alt-circle-up"></i></a>
</li>
<li>
<a href="#main" class="dot active" data-scroll="main">
<span>Главная</span>
</a>
</li>
<li>
<a href="#about_us" class="dot" data-scroll="about_us">
<span>О нас</span>
</a>
</li>
<li>
<a href="#services" class="dot" data-scroll="services">
<span>Услуги</span>
</a>
</li>
<li>
<a href="#sequence" class="dot" data-scroll="sequence">
<span>Порядок работы</span>
</a>
</li>
<li>
<a href="#stages" class="dot" data-scroll="stages">
<span>Этапы работы</span>
</a>
</li>
<li>
<a href="#portfolio" class="dot" data-scroll="portfolio">
<span>Портфолио</span>
</a>
</li>
<li>
<a href="#news" class="dot" data-scroll="news">
<span>Новости</span>
</a>
</li>
<li>
<a href="#contacts" class="dot" data-scroll="contacts">
<span>Контакты</span>
</a>
</li>
<li>
<a href="#" class="arrow down"><i class="far fa-arrow-alt-circle-down"></i></a>
</li>
</ul>
</nav>