Родительский блок шириной 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;
}
Это макет:
То, что получилось у меня:
Средний
Средний
