Как избавиться от скролла из-за container?

* {
  margin: 0;
  padding: 0;
}
.container {
  padding-left: 20px;
  
}
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 60px;
  background: red;
}

.logo {
  width: 60px;
  height: 60px;
  background: grey;
}
.menu {
  display: flex;
}
.menu li {
  list-style: none;
}

.content {
  width: 800px;
  background: green;
}

footer {
  background: rgba(102, 61, 130, 1);
}

<header class="container">
  <div class="logo">
    тут будет лого
  </div>
  <div class="menu">
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
    <li>пунтк 4</li>
  </div>
</header>
<div class="content container">
  <h2>Lorem ipsum dolor sit amet.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, expedita. Nisi expedita commodi provident dolore tempora corporis. Deserunt necessitatibus dignissimos, vero iusto neque repudiandae cum magnam adipisci unde porro eum eligendi nobis, laudantium ratione maiores officia, dolorum ipsam dicta sed vel? Autem esse voluptatem minima odio natus veritatis amet illo.</p>
</div>
<footer>
 <div class="footer-menu container">
   <li>пункт 1</li>
   <li>пункт 2</li>
   <li>пункт 3</li>
 </div>
</footer>