Задать вопрос
asistent1133
@asistent1133
Верстальщик, Front-end разработчик (Intern)
html

Как сделать что бы блок с nav был таким же по ширине как и весь header? Почему бэкграунд header шире, чем сам container?

5f6f937e1783d266773620.png5f6f9385b0a2d047071967.jpeg5f6f938cbaacb066723927.jpeg

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Шукачі</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/slick-theme.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header class="main-page-header header">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-3">
                    <div class="link">
                        <a href="#" class="img-link">
                            <img src="img/fb.png" alt="facebook">
                        </a>
                        <a href="#" class="img-link">
                            <img src="img/inst.png" alt="instagram">
                        </a>
                        <a href="#" class="img-link">
                            <img src="img/tg.png" alt="telegram">
                        </a>
                        <a href="#" class="img-link">
                            <img src="img/g.png" alt="google+">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="header-btn">
                        <a href="#" class="link-ua">
                            Укр
                        </a>
                        <a href="#" class="link-ru">
                            Рус
                        </a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <div class=" header-logo">
                            <p class="seekers__text">
                                <i>Твій портал про туризм</i>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="navigation">
                        <nav>
                            <ul class="main-menu navigation d-flex justify-content-between">
                                <li class="main-menu__item">
                                    <a href="#">Головна</a>
                                </li>
                                <li class="main-menu__item">
                                    <a href="#">Новини</a>
                                </li>
                                <li class="main-menu__item">
                                    <a href="#">Думка експертів</a>
                                </li>
                                <li class="main-menu__item">
                                    <a href="#">Для навчання</a>
                                </li>
                                <li class="main-menu__item">
                                    <a href="#">Моя країна</a>
                                </li>
                                <li class="main-menu__item">
                                    <a href="#">Цікавості</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>


/*----specification----*/


body{
    font-family: 'Tahoma', sans-serif;
    color: black;
    font-size: 18px;
}

h1,h2,h3{
    font-family: 'Raleway 800';
    text-transform: uppercase;
    color: #000;
}

section{
    padding: 50px 0;
}
/*----header----*/

.main-page-header{
    background: url("../img/22-layers.png") no-repeat center top;
    height: 228px;
}

.img-link {
    margin-right: 18px;
}
.link{
    margin-left: 75px;
}
.link, .header-btn{
    margin-bottom: 20px;
    padding-top: 20px;

}
.header-btn a{
    text-decoration: none;
    cursor: pointer;
    margin-right: 20px;
    color: black;
    font-family: 'Raleway-Medium';
    text-transform: uppercase;
    padding: 10px 15px;
}

.header-btn a:hover{
    background-color: #ff9f1c;
    border-radius: 3px;
    height: inherit;
}
.header-logo__img{
    padding-bottom: 77px;
}

.header-logo{
    position: relative;
}

.seekers__text{
    position: absolute;
    color: #000000;
    font-size: 24px;
    margin-top: 95px;

}

.navigation{
    background: #1d7a72;
    margin-top: 160px;
}
.main-menu{
    align-items: center;
}
.main-menu__item{
    font-family: 'FuturaPT-Book';
    list-style-type: none;
}

.main-menu__item a{
    text-decoration: none;
    display: block;
    color: #fdfeda;
    padding: 20px 20px;

}

.main-menu__item a:hover{
    align-items: center;
    background: #ff9f1c;
    border-radius: 3px;
    padding: 20px 20px;
}
  • Вопрос задан
  • 462 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Бэкграунд накладывается не на контейнер (у которого есть ширина), а на header, который этой же ширины не имеет. Поэтому фон не фиксируется по ширине контейнера
Ответ написан
1 комментарий
1 комментарий
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Приветствую!

Не совсем понятно, почему Вы хотите получить такое поведение блоков (поставленная задача), при этом создавая структуру саму по себе, говорящую напрямую - обратное.

У вас есть:
<header class="main-page-header header"></header>
, в который вы вкладываете div с библиотечным бутстраповским классом container... Определяете фон именно к внешнему семантическому контейнеру , который по умолчанию имеет width: 100%, как и любой другой блочный элемент. Это объясняет то, по какой причине фон на всю ширину области просмотра. С этим разобрались. Идем дальше.

Далее Вы вкладываете навигацию снова в .container библиотеки bootstrap, что и является ограничителем для вашего <nav>

Решение

Вытащите родительский контейнер навигации из ограничивающего .container, а вот его содержимое уже можете в него вкладывать, либо, по крайней мере, применяйте не .container, а .container-fluid
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы