@vevjus
Кодинг и дизайн

Что не так с шапкой сайта?

Должно получатся так: 63cd4dcf74258791078175.png
Получается так: 63cd4d22ef603895092346.png
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML & CSS практика от AVIS TV</title>

    <!-- Bootstrap reboot (для сброса стилей) -->
    <link rel="stylesheet" href="libs/bootstrap-reboot.min.css">

    <!-- Bootstrap сетка -->
    <link rel="stylesheet" href="libs/bootstrap-grid.min.css">

    <!-- Шрифты с Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

    <!-- Стили сайта -->
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <nav class="navbar">
        <div class="container">
            <a href="#" class="navbar-brand">HTML&CSS</a>

            <div class="navbar-wrap">
                <ul class="navbar-menu">
                   <li><a href="#">Главная</a></li>
                   <li><a href="#">Услуги</a></li>
                   <li><a href="#">Товары</a></li>
                   <li><a href="#">Контакты</a></li>
               </ul>
            </div>
        </div>
    </nav>
</body>

</html>

body {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    min-width: 320px;
    overflow-x: hidden;
    height: auto;
}

.navbar {
    width: 100%;
    height: 64px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}

.navbar .container {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы