Trouble getting elements in a Header to display in the same row

I'm recreating this website for a project and I'm having trouble with getting the logo, search and nav items (BOARDS, NEWS, Q&A) to stay in the same line. For some reason all three of these elements are taking up their own line and I'm unable to figure out why that is happening. Please advice.

NOTE

You will need to view the page in full screen as the Header is not currently responsive.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.header {
  display: block;
  flex-direction: column;
  font-family: "Roboto Condensed", "Helvetica Neue", "HelveticaNeue", Arial,
    sans-serif;
  font-size: 14px;
}

.header__container a {
  background: url(https://gamefaqs.gamespot.com/a/images/site/logo_v13.png)
    no-repeat left center;
  display: block;
  height: 50px;
  overflow: hidden;
  margin: 0 0;
  text-indent: 110%;
  width: 100%;
  background-size: contain;
}

.header__console div {
  padding: 0 300px;
  margin: 4px 0;
}

.header__console {
  border: 1px solid black;
  background-color: #28398a;
  color: #fff;
}

.header span {
  padding: 0 5px;
}

.header__container {
  border: 1px solid black;
  background-color: #3951c6;
  color: #fff;
}

.header__container div {
  padding: 0 300px;
  margin: 4px 0;
}

.header__container-item {
  font-size: 15px;
}

.header__container input[type="text"] {
  padding: 6px;
  margin-top: 8px;
  font-size: 16px;
  border: none;
  border-radius: 300px;
  background-color: #f5f5f5;
}

.header__footer {
  border: 1px solid #28398a;
}

<!-- language: lang-html -->

<div class="header">
      <div class="header__console">
        <div>
          <span>PC</span>
          <span>PS4</span>
          <span>PS5</span>
          <span>Switch</span>
          <span>Xbox One</span>
          <span>Xbox Series</span>
          <span>More Systems ▼</span>
        </div>
      </div>
      <div class="header__container">
        <div class="header__container-logo">
          <a href="/">GameFAQs</a>
        </div>
        <div class="header__container-search">
          <input type="text" placeholder="Search Game Titles" name="search" />
        </div>
        <div class="header__container-nav">
          <span class="header__container-item">BOARDS</span>
          <span class="header__container-item">NEWS</span>
          <span class="header__container-item">Q&A</span>
        </div>
      </div>
      <div className="header__footer"></div>
    </div>

<!-- end snippet -->

I'd say your trouble is this:

.header__container div {
  padding: 0 300px;
}

Surely you don’t always want 300 pixels of padding on both sides of your content? You need your website to work on screens of different widths, so your design needs to be more flexible than that. This article provides a good explanation.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  background: #e7e7f2;
  padding: 5px 5vw;
}

@media (min-width: 750px) {
  p {
    padding: 5px 10vw;
  }
}

@media (min-width: 1250px) {
  p {
    padding: 5px 15vw;
  }
}

@media (min-width: 1750px) {
  p {
    padding: 5px 20vw;
  }
}

<!-- language: lang-html -->

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus metus sed viverra feugiat. Donec nec orci ut lacus pellentesque tristique. Mauris quis malesuada mi. Phasellus lorem nunc, fringilla efficitur ipsum at, gravida dictum dolor. Integer arcu risus, aliquam quis dictum non, lobortis quis nisl. Suspendisse interdum orci vel lacus aliquet tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ut gravida mi, quis pharetra nulla.
</p>
<p>
Etiam ac sapien sapien. Curabitur volutpat elit lorem, ut imperdiet leo molestie eget. Aliquam feugiat ipsum id tincidunt dapibus. Nulla interdum ut nunc id consequat. Nam metus diam, rhoncus non luctus vel, aliquam nec ante. Nullam hendrerit lacinia lobortis. Nulla facilisi. Sed gravida tortor vel commodo ultricies. Etiam sagittis mollis nulla finibus dictum. Etiam efficitur orci et lectus lobortis, et mollis purus venenatis. Sed venenatis pretium pharetra. Quisque et tristique libero. Pellentesque vel purus odio. Nam nisl leo, sagittis nec pretium vel, pulvinar a dui. Nullam dui risus, ornare convallis tempus eu, congue quis ex. Vestibulum eu magna sed tellus convallis vulputate.
</p>
<p>
Cras lorem tellus, aliquet at auctor vel, fringilla ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse consectetur massa sit amet enim tempus dictum. Nam dictum faucibus sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent euismod metus lorem. Suspendisse sollicitudin justo eget volutpat luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ultrices massa at nisl finibus fringilla. Morbi eu est eu nunc varius fermentum et id metus. Aenean sed nulla velit.
</p>
<p>
Cras porta fermentum leo, et dapibus elit ullamcorper nec. Ut feugiat pellentesque augue, aliquam eleifend lacus pulvinar id. Aenean ultrices sagittis tellus in mattis. In hendrerit aliquam mauris at volutpat. Maecenas tortor nulla, gravida at ornare nec, dignissim ut tortor. Quisque eros mauris, varius vel lectus eget, consequat consequat leo. Cras vel tempor lacus. Sed elementum venenatis hendrerit. Sed nec pulvinar odio. Suspendisse egestas aliquam iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed blandit lacinia posuere. Aenean in sollicitudin mi. Aenean accumsan ullamcorper mauris, eget interdum tortor mollis ut.
</p>
<p>
Nam feugiat quam at sollicitudin vehicula. Morbi efficitur, quam eu ullamcorper venenatis, felis lacus auctor nibh, sed aliquam dolor elit ut nisl. Cras in luctus tellus. Aliquam auctor, eros a tincidunt fringilla, nunc libero semper est, quis faucibus dui tellus et elit. Donec eu massa eget quam porttitor varius quis nec sapien. Sed ullamcorper venenatis ante, eu blandit mauris. Integer fringilla nec felis quis vulputate. Nulla sit amet pharetra eros, eget consequat nunc.
</p>

<!-- end snippet -->