[HTML/CSS]ブラウザの幅によって、余白を調整したい

Question

前提・実現したいこと

• Instagramの様なWeb画面を作ろうとしています。
• フレームワークはRuby on Railsです
• HamlとSassを使っています。
• 現在はheader部分を作成中
• headerは３つのboxの横並びで構成

ブラウザの幅を小さくした時に、headerの両側の余白からまずは減っていき、
余白がなくなった後は、box間の余白が無くなっていく様にしたいです。

発生している問題・エラーメッセージ

両側の余白をなくす事ができず、ブラウザの幅を小さくした時、
box間の余白が先に小さくなってしまう。
▼参考キャプチャ
https://gyazo.com/8108b8f523951e677effab7982282609

該当のソースコード

↓ブラウザで表示時のHTML

<header class="header">
  <div class="header__box">
    <div class="title">
      <a class="title-img" href="/"><img width="120" alt="Instagram" src="/assets/title-logo-29864f8a083ba929ab139e67ac0a1b222daecc7060502876bccdbf2aa193756d.png"></a>
    </div>
    <div class="search">
      <p>????検索</p>
    </div>
    <div class="menu">
      <ul class="menu__icons">
        <li class="home-icon">
          <a href="/#"><i class="fas fa-globe-americas fa-lg btn-icon"></i>
        </a></li>
        <li class="chat-icon">
          <a href="/#"><i class="fas fa-paper-plane fa-lg btn-icon"></i>
        </a></li>
        <li class="profile-icon">
          <a href="/#"><i class="fas fa-user-astronaut fa-lg btn-icon"></i>
        </a></li>
      </ul>
    </div>
  </div>
</header>

↓実際のソースコード

%header.header
  .header__box
    .title
      = link_to image_tag('title-logo.png', width: '120', alt: "Instagram"), "/", class: "title-img"
      -# - if user_signed_in?

    .search
      %p ????検索

    .menu
      %ul.menu__icons
        %li.home-icon
          = link_to "/#" do
            %i.fas.fa-globe-americas.fa-lg.btn-icon
        %li.chat-icon
          = link_to "/#" do
            %i.fas.fa-paper-plane.fa-lg.btn-icon
        %li.profile-icon
          = link_to "/#" do
            %i.fas.fa-user-astronaut.fa-lg.btn-icon

* {
  box-sizing: border-box;
}

.header{
  height: 60px;
  border-bottom: 1px solid lightgray;
  &__box{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20%;
    margin-right: 20%;
    padding: 0 20px;
  }
}

.search{
  width: 215px;
  text-align: center;
  border: 1px solid lightgray;
  background-color: rgb(250, 250, 250);
}

.menu{
  &__icons{
    display: flex;
    justify-content: flex-end;
    .home-icon{
      margin-right: 20px;
    }
    .chat-icon{
      margin-right: 20px;
    }
  }
}

.btn-icon{
  text-decoration: none;
  color: gray;
}

試したこと

ネットでいろいろと検索したのですが、解決策を見つけられませんでした…。

Comments

[miyabi_pudding]

使っているフレームワークを記載、質問タグに追加してください。
おそらく、Ruby On Rails使っていて、
それは、hamlですよね？

そして、ブラウザで表示時の、HTML自体の記載をお願いします。

[helloTsubasa]

使っているフレームワークを記載し、質問タグに追加しました。

ブラウザで表示時のHTMLを記載しました。

Answer 1

justify-contentとmax-widthを組み合わせる事で解決できました！

キャプチャ動画

↓※Sassを使っています

.header{
  height: 60px;
  border-bottom: 1px solid lightgray;
  display: flex;
  justify-content: center;
  &__box{
    height: 100%;
    width: 100%;
    max-width: 840px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}