justify-contentを使ったときの余白のつけ方

Question

前提・実現したいこと

画像はjustify-content: space-around;をかけているものですが、もう少し外側に要素をずらしたいんです。space-aroundとspace-betweenの間くらいの余白をつけられたらいいと思うんですが、どんな方法があるんでしょうか？質問に『justify-contentを使ったときの余白のつけ方』と書いてはいますが、もっといい方法があるのであれば教えてください。

該当のソースコード

<header>
      <div class="container">
        <div class="header">
      <h2 class="header-logo">Profile</h2>
      <div class="header-button">
      <button id="nav-open"></button>
    </div>
      <nav class="header-nav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Bicycle</a></li>
        </ul>
      </nav>
    </div><!-- /header -->
    </div><!-- /container -->
    </header>

.container {
  max-width: 850px;
  margin: 0 auto;
}

/* ====== header ====== */
header {
  padding: 10px 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  background: rgb(57, 62, 70);
  padding: 8px 20px;
  color: white;
  font-size: 23px;
}

.header-nav li {
  display: inline-block;
  font-size: 14px;
  padding: 0 15px;
}

.header-nav a {
  color: black;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media(max-width: 768px) {
  .header {
    justify-content: space-around;
  }

  .header-nav {
    display: none;
  }

  #nav-open {
    background: url(../images/hamburger.png);
    background-size: contain;
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
}

試したこと

headerにpaddingをかけても、ボタンを押したときに出てくるheader-navの幅まで変わってしまいます。ロゴにpaddingをかけて調節しようとしてもbackground-colorが大きくなってしまいます。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

Answer 1

gap を使ってはどうでしょうか。

.header {
	justify-content: space-around;
	gap: 50px;
}

gap (grid-gap) - CSS: カスケーディングスタイルシート | MDN

Comments

[amagiri]

勉強になりました、ありがとうございます！