* {
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?
nav
на ширину экрана, аcontainer
на1110px
, задавайте тогда иnav
минимальную ширину в1110px