I want to create a navigation with an image on the left and the navigation bar on the right. The position of the navigation is fixed. The problem is that the navigation is now wider than the body around it.
How could I make the navigation as wide as the body while having it position fixed?
body {
margin: 20px 20px 0; }
body nav {
top: 0;
background-color: #fff;
padding: 10px 10px 0 0;
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
z-index: 99;
height: 80px; }
body nav .nav__logo {
width: 180px;
padding: 10px 0; }
body nav .nav__logo img {
width: 100%; }
body nav .nav__bar {
display: flex;
padding-right: 30px;
padding-left: 0;
justify-content: flex-end;
align-items: center;
flex: 1; }
body nav .nav__bar li {
margin: 0 20px; }
body nav .nav__bar .bar__level1 {
display: inline-flex; }
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Nav bar problem</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<nav>
<div class="nav__logo">
<a href="/" title="Start">
<img src="">
</a>
</div>
<div class="nav__bar">
<ul class="bar__level1">
<li><p>Start</p></li>
<li><p>Item1</p></li>
<li><p>Item2</p></li>
<li><p>Item3</p></li>
<li><p>Item4</p></li>
</ul>
</div>
</nav>
<main>
</main>
</body>