ヘッダーの文字を折り返さずに表示したい

実現したいこと

レスポンシブ対応のヘッダーの表示で文字が折り返さないように表示したい

前提

HTMLとCSSでコーディング模写をしています。
600px以下になるとレスポンシブの対応になるように設定しています。
また380px以下になると折り返しになってしまいます。
こちらを幅が小さくなっていっても折り返さないように設定したいです。

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

上記画像のように表示幅を小さくすると文字が折り返して表示されてしまいます。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html_css_output_beginner</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <!-- header -->
  <header class="header">
    <div class="header_container wrapper">
      <h1>レジュメ</h1>
      <nav>
        <ul>
          <li>自己紹介</li>
          <li>プロフィール画像</li>
        </ul>
      </nav>
    </div>
    <div id="main_image"></div>
  </header>

  <!-- main -->
  <div class="main_content wrapper">
    <main id="main">
      <section class="introduction">
        <h2>自己紹介</h2>
        <div class="user_info">
          <h3>鈴木 太郎</h3>
          <p>
            鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。<br>
            鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。<br>
            鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。鈴木太郎です。<br>
          </p>
          <img class="info_img" src="images/150x150.png" alt="自己紹介イメージ">
        </div>
      </section>

      <section class="profile_imege">
        <h2>プロフィール画像</h2>
        
        <div class="profile_container">
          <div class="profile">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキスト</p>
            <img src="images/640x424.png" alt="プロフィールイメージ">
          </div>

          <div class="profile">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキスト</p>
            <img src="images/640x424.png" alt="プロフィールイメージ">
          </div>

          <div class="profile">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキスト</p>
            <img src="images/640x424.png" alt="プロフィールイメージ">
          </div>
        </div>
      </section>
    </main>
  </div>
  
  <footer>
    <small>&copy; 2023 taro suzuki</small>
  </footer>
</div>
</body>
</html>

style.css
1@charset "UTF-8";
2/* PCおよび共通設定 */
3html{
4  font-size: 100%;
5}
6
7body {
8  font-family: heisei-maru-gothic-std, a-otf-midashi-mi-ma31-pr6n, sans-serif;
9}
10
11img {
12  width: 100%;
13}
14
15.wrapper {
16  max-width: 940px;
17  margin: 0 auto;
18  padding: 0 4%;
19}
20
21
22
23/* header */
24.header_container {
25  display: flex;
26  align-items: center;
27  justify-content: space-around;
28  margin: 10px auto;
29}
30
31.header_container h1 {
32  font-size: 20px;
33  font-weight: 600;
34  padding-left: 15px;
35  padding-right: 15px;
36  background-color: #384151;
37  color: #fff;
38}
39
40.header nav ul {
41  display: flex;
42}
43
44.header nav ul li {
45  margin-left: 30px;
46  list-style: none;
47}
48
49#main_image {
50  width: 100%;
51  height: 600px;
52  background-image: url(../images/1920x1280.png);
53  background-repeat: no-repeat;
54  background-position: center;
55  background-size: cover;
56}
57
58/* main */
59.introduction {
60  padding: 40px;
61}
62
63.introduction h2 {
64  border-bottom: 1px solid #000;
65  width: 100px;
66  margin: 50px auto;
67}
68
69.user_info {
70  display: grid;
71  grid-template-columns: 1fr 150px;
72}
73
74.introduction h3 {
75  margin-bottom: 5px;
76  grid-column: 1;
77}
78
79.introduction p {
80  grid-column: 1;
81  grid-row: 2;
82}
83
84.introduction img {
85  width: 150px;
86  height: 150px;
87  border-radius: 50%;
88  grid-column: 2 / 3;
89  grid-row: 1 / 3;
90}
91
92.profile_imege h2 {
93  border-bottom: 1px solid #000;
94  width: 200px;
95  margin: 50px auto;
96}
97
98.profile_container {
99  display: flex;
100  gap: 15px;
101}
102
103.profile h3 {
104text-align: center;
105margin-bottom: 10px;
106}
107
108.profile p {
109  text-align: center;
110  margin-bottom: 10px;
111}
112
113/* footer */
114footer {
115  text-align: center;
116  margin-top: 70px;
117}
118
119/* 600px以下 */
120@media(max-width: 600px) {
121  html {
122    font-size: 80%;
123  }
124
125  .introduction{
126    padding: 0;
127  }
128
129  .introduction h2 {
130    width: 78px;
131  }
132
133  .user_info {
134    display: block;
135  }
136
137  .user_info h3 {
138    text-align: center;
139  }
140
141
142  .info_img {
143    margin: 0 auto;
144  }
145  
146  .profile_container {
147    display: block;
148  }
149
150  .profile_imege h2 {
151    width: 160px
152  }
153
154  .profile img {
155    margin-bottom: 20px;
156  }
157
158}
159

試したこと

フォントの％を小さくしてみる

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

上記画像が実現させたい表示になります。
対処法が思い浮かばないためこちらにて質問させていただきました。
実際の例を教えていただけたらと思います。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Flexレイアウトで、フレックスアイテム(flexを設定した子要素)の幅の合計が親の幅より大きくなる場合、デフォルトでは、各フレックスアイテムの幅が必要に応じて自動で縮小されます。flex-shrink: 0;を設定することで縮小を禁止することができます。

あと<nav>のリストの余白は、margin-left ではなくgapでリスト間のみにつけるようにするといいでしょう。

css
1.header_container h1 {
2  font-size: 20px;
3  font-weight: 600;
4  padding-left: 15px;
5  padding-right: 15px;
6  background-color: #384151;
7  color: #fff;
8  flex-shrink: 0; /* 追加 */
9  
10}
11
12.header nav ul {
13  display: flex;
14  gap: 30px;    /* 追加  */
15  padding: 0;   /* 追加 デフォルトの余白をリセット */
16}
17
18.header nav ul li {
19/*  margin-left: 30px; */
20  list-style: none;
21  flex-shrink: 0; /* 追加 */
22}