Holvender
@Holvender

Как вывести border за пределы родительского блока?

Родительский блок шириной 1200px, следовательно, когда я задаю border дочернему блоку, он упирается в пределы родительского. Как это обойти?

<header class="section-outer header">
            <div class="container">
                <div class="nav">
                    <img src="img/logo.png" alt="logo" class="logo">
                    <ul class="main-menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Pages</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Extensions</a></li>
                        <li><a href="#">Tutorials</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                    <div class="social_btn-box">
                        <div class="social_btn"><a href="#"><img src="img/facebook.png" alt="Facebook"></a></div>
                        <div class="social_btn"><a href="#"><img src="img/twitter.png" alt="Twitter"></a></div>
                        <div class="social_btn"><a href="#"><img src="img/skype.png" alt="Skype"></a></div>
                        <div class="social_btn"><a href="#"><img src="img/linkedin.png" alt="LinkedIn"></a></div>
                    </div>
                </div>
                <div class="create">
                    <h1 class="create-h1">Creatives</h1>
                    <a class="create-p">Powered by psdfreebies.com</a>
                </div>
            </div>
        </header>

ul{
    list-style: none;
}

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

body{
    font-family: 'Open Sans', sans-serif;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

a{
    text-decoration: none;
    color: #fff;
}


/* HEADER */

.header{
    background: url('../img/header-bg.jpg') no-repeat center top / cover;
}

.logo{
    margin-right: 227px;
}

.nav{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #848484;
    padding: 22px 0 22px 0;
}

.main-menu{
    display: flex;
    font-size: 16px;
}

.main-menu li a{
    padding: 43px 24px 43px 24px;
}

.main-menu li a:hover{
    border-bottom: 5px solid #11749E;
}


.social_btn{
    margin-right: 31px;
}

.social_btn-box{
    display: flex;
    align-items: center;
    margin-left: auto;
}


Это макет:
5fe057d1138e0223045820.png

То, что получилось у меня:
5fe057f4d9605186081135.png
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
@guryanov_junior
Изучающий фронтенд.
Просто задайте border для header. А блок div.create выведите в отдельную section или div.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Russo2
HTML:
<body>
    <header class="header">
        <div class="header__inner">
            <div class="container">
                ...
            </div>
        </div>
    </header>
</body>


CSS:
.header__inner {
  border-bottom: 1px solid #848484;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы