* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: rgba(47, 60, 255, 0.49)
}
.container {
display: block;
margin: 0 auto;
width: 100%;
max-width: 1600px;
}
nav {
display: flex;
background: #303f62;
height: 150px;
width: 100%;
}
ul {
display: flex;
padding: 0;
height: 125px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
margin-top: 15px;
}
.left img {
margin-left: 15px;
}
.right {
margin-top: 0px;
margin-left: auto;
margin-right: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="about_us.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<nav>
<div class="left">
<img src="images/logo.jpg" height="100" alt="">
</div>
<div class="right">
<ul>
<a class="on">Главная</a>
<a>О нас</a>
<a>Контакты</a>
<a>Партнеры</a>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Почему navbar не растягивается на всю ширину контейнера? Я задал ему 100% ширину, но это не сработало. В чем причина?