Navbar не растягивается всю ширину экрана

Рейтинг: 0Ответов: 1Опубликовано: 18.05.2023

При вёрстке navbar'a столкнулся с проблемой, что он не растягивается во всю ширину экрана.

<style>
    .navbar {
        overflow: hidden;
        background-color: #6A6666;
        position: fixed;
        top: 0;
        width: 100%;
    }
</style>

<nav class="navbar">
    <div class="container" style="margin-left: 200px; margin-right: 200px; height: 50px;">
        <!-- JackHelper Logo -->
        <a href="{% url 'login' %}"><img src="{% static 'img/svg/JackHelper-Nav-Logo.svg' %}" width="150px" height="50px"></a>
        
        <!-- Menu -->
        <ul style="margin-top: 10px;">
            <a href="#" class="menu">задачи</a>
            <a href="#" class="menu">проценки</a>
            <a href="#" class="menu">статистика</a>
            <a href="#" class="menu">сотрудники</a>
        </ul>

        <ul style="margin-top: 6px;">
            <a class="search" href="{% url 'login' %}"><img src="{% static 'img/svg/Search-Button.svg' %}" width="50px" height="35px"></a>
            <a href="{% url 'login' %}"><img src="{% static 'img/svg/Profile-Button.svg' %}" width="50px" height="35px"></a>
        </ul>
    </div>
</nav>

Слева он обрезается и не доходит до края экрана, несмотря на то, что width=100% введите сюда описание изображения

Ответы

▲ 0

Сделайте обнуление стилей, которые по умолчанию задает браузер.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}