Horizontal scroll on one child element in parent

HTML

<div class="container">
    <h1>Page</h1>
    <div class="main">
        <h2>Main</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="projects">
        <h2>Projects</h2>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
    </div>
</div>

CSS

.container {
  width: 500px;
  height: 100%;
  overflow-x: scroll;
  background-color: lightgrey;
  padding: 20px;
}

.projects {
  width: 960px;
}

.project {
  display: inline-block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  background-color: grey;
}