Bootstrap navbar. Объект не растягивается на всю ширину экрана, container-fluid тоже не помог. HTML/CSS
Создала навбар с помощью бутстрапа, но его фон не на всю ширину экрана. При увеличении масштаба страницы справа фон не до конца. Навбар в контейнере, но всё равно не на всю ширину. Так же и другие блочные элементы не на всю. Код страницы.
.dropdown-item,
.nav,
.btn,
.dropdown-menu {
color: white;
background-color: #262222;
}
.btn:hover {
color: black;
background-color: #e9ecef;
}
.dropdown-divider {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biologist - все про біологію</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="settings.css">
<nav class="navbar navbar-expand-lg" style="background-color: yellowgreen;">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="color: white; font-weight: bold;">Biologist - твій універсальний довідник</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ГОЛОВНА</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">6 КЛАС</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Вступ</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Клітина</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Одноклітинні організми. Перехід до багатоклітинності</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Рослини та їх різноманітність</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Гриби</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
7 КЛАС
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Вступ</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Різноманітність тварин</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Процеси життєдіяльності тварин</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Поведінка тварин</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Середовища існування тварин</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
8 КЛАС
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Вступ</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Обмін речовин та енергії</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Травлення</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Дихання</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Транспорт речовин в організмі</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Процеси виділення</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Опор та рух</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Нервова система та зв’язок з середовищем</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Сенсорні системи</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Вища нервова діяльність</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Регуляція функцій організму</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Розмноження і розвиток</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
9 КЛАС
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Хімічний склад клітин та молекул</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Структура клітини</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Принципи функціонування клітини</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Збереження і реалізація спадкової інформації</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Успадкування</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Еволюція органічного світу</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Біорізноманіття</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Надорганізмові біологічні системи</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Біологія як основа біотехнології та медицини</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
10 КЛАС
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Вступ</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Біорізноманіття</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Обмін речовин і енергії</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Спадковість і мінливість</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Репродукція та розвиток організмів</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false">
11 КЛАС
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Адаптації</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Біологічні основи здорового способу життя</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Екологія</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Сталий розвиток і раціональне природокористування</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Застосування результатів біологічних досліджень у селекції, біотехнології та медицині</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Введіть пошуковий запит" aria-label="Search" style="width: 230px;">
<button class="btn btn-outline-success" type="submit">Пошук</button>
</form>
</div>
</div>
</nav>
</body>
</html>
Что делать? Может я где-то ошиблась?