0

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: TruenoRegular;
    width: 100%;
}
header{
    width: 100%;
    
}

nav {
    width: 100%;

    background: #472424;

}

.container {
    width: 1110px;
    border: 2px solid #ff0000;
    margin: 0 auto;
}

.menu {
    width: 100%;
    display: flex;

}

ul {

    display: flex;
    list-style: none;

}

.left {
    
    flex: 2;
}

.right {
    flex: 1;

}


.menu .left ul {
    display: flex;
    justify-content: space-around;

    width: 313px;

}


.menu .right ul {
    display: flex;
    justify-content: space-around;
    width: 316px;
}

.menu li {
padding: 20px 0px;

}
.right li{
    padding: 20px 20px;
}
.menu a {
    font-size: 13px;
    color: #000;
    text-decoration: none;
    white-space: nowrap
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/trueno" type="text/css" />
</head>

<body>
    <header>
        <nav>
            <div class="container">
                <div class="menu">
                    <div class="left">
                        <ul>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Legal</a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="#"><img src=".//img/icon1.png" alt=""></a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Legal</a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

</body>
</html>

В фулскрине все нормально но когда уменьшаешь окно и при скроллинге вправо nav заканчивается и за место него идет белый фон. Как можно красиво решить эту проблему растянув nav до конца страницы по ширине? Доп вопрос: нормально ли вообще позиционировать flex'ами объекты как я это сделал с классами left и right?

3
  • Нажмите "выполнить код", проскрольте вправо - так быть не должно. Нажмите "на всю страницу" - должно быть так.
    – midia
    Commented 17 июл. 2018 в 13:20
  • Т.е. nav должен растягиваться на всю длину не экрана а страницы
    – midia
    Commented 17 июл. 2018 в 13:22
  • ну так nav на ширину экрана, а container на 1110px, задавайте тогда и nav минимальную ширину в 1110px
    – SVE
    Commented 17 июл. 2018 в 14:04

3 ответа 3

1

Блоку с классом menu добавляем background: #472424; При этом можно у тега nav это свойство убрать. Скорее всего проблема возникает из-за того, что контент внутри нава идет по размерам больше чем 100%, а у нава и его родителей ширина такая, поэтому он дальше не идет со своим цветом. Из этого возникает второе решение пишем хедеру(или наву...) display:inline-block;(чтобы ширина была по контентной части) и убираем фиксированую ширину в 100%(чтобы ширина была по контентной части), но появляются полосы прокрутки. Выбирай любое решение!

1

При маленьком экране у тебя nav получается короче чем .container поэтому и не вырисовывается бек.

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: TruenoRegular;
    width: 100%;
}
header{
    width: 100%;
    
}

nav {
    width: 100%;
    /* background: #472424;  тут можеш убрать или оставить бек */
}

.container {
    width: 1110px;
    border: 2px solid #ff0000;
    margin: 0 auto;
    background: #472424;
}

.menu {
    width: 100%;
    display: flex;

}

ul {

    display: flex;
    list-style: none;

}

.left {
    
    flex: 2;
}

.right {
    flex: 1;

}


.menu .left ul {
    display: flex;
    justify-content: space-around;

    width: 313px;

}


.menu .right ul {
    display: flex;
    justify-content: space-around;
    width: 316px;
}

.menu li {
padding: 20px 0px;

}
.right li{
    padding: 20px 20px;
}
.menu a {
    font-size: 13px;
    color: #000;
    text-decoration: none;
    white-space: nowrap
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/trueno" type="text/css" />
</head>

<body>
    <header>
        <nav>
            <div class="container">
                <div class="menu">
                    <div class="left">
                        <ul>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Legal</a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="#"><img src=".//img/icon1.png" alt=""></a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Legal</a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

</body>
</html>

0

Сделал медиа запросом

@media (max-width: 1110px) {
.container {
    width: 100%;
    }
}

Ну а вообще самый простой вариант прописать background: #472424; как у nav так и у menu

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.