ブラウザの横幅を広げるとh2タグの文面が改行されてしまいます。

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

GoogleChromeのブラウザの横幅を1760px以上に広げるとh2タグの「We'll Make Your Day」の「Day」の部分が改行されてしまいます。
ブラウザの横幅をどんなに広げても上記が改行されないようにする方法はありますでしょうか。
予想の正誤も含めて教えていただけるとありがたいです。
※条件として、headerのwrapperの設定はそのままにしておきたいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4    	<meta charset="utf-8">
5    	<title>WCB Cafe</title>
6    	<meta name="description" content="ヘルシーなカフェ">
7
8    <!-- CSS -->
9    	<link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css">
10    	<link rel="stylesheet" type="text/css" href="css/style.css">
11    </head>
12    <body>
13    	<header class="page-header wrapper">
14    		<h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></h1>
15    		<nav>
16    			<ul class="main-nav">
17    				<li><a href="news.html">News</a></li>
18    				<li><a href="menu.html">Menu</a></li>
19    				<li><a href="contact.html">Contact</a></li>
20    			</ul>
21    		</nav>
22    	</header>
23    	<div class="home-content wrapper">
24    		<h2 class="page-title">We'll Make Your Day</h2>
25    		<p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
26    		<a class="button" href="menu.html">メニューを見る</a>
27    	</div><!-- /.home-content -->
28    </body>
29</html>
30

css
1@charset "UTF-8";
2
3/* 共通部分
4------------------------------- */
5html {
6    font-size: 100%;
7}
8body{
9    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
10    line-height: 1.7;
11    color: #432;
12}
13a {
14    text-decoration: none;
15}
16img {
17    max-width: 100%;
18}
19
20
21/* HEADER
22------------------------------- */
23.logo {
24	width: 210px;
25	margin-top: 14px;
26}
27.main-nav {
28	display: flex;
29	font-size: 1.25em;
30	text-transform: uppercase;
31	margin-top: 34px;
32	list-style: none;
33}
34.main-nav li {
35	margin-left: 36px;
36}
37.main-nav a {
38	color: #432;
39}
40.main-nav a:hover {
41	color: #0bd;
42}
43.page-header {
44	display: flex;
45	justify-content: space-between;
46}
47.wrapper {
48	max-width: 1100px;
49	margin: 0 auto;
50	padding: 0 4%;
51}
52
53/* HOME
54------------------------------- */
55.home-content {
56	text-align: center;
57	margin-top: 10%;
58}
59.home-content p {
60	font-size: 1.125rem;
61	margin: 10px 0 42px;
62}
63
64/* 見出し */
65.page-title {
66	font-size: 5rem;
67	font-family: 'Philosopher', serif;
68	text-transform: uppercase;
69	font-weight: normal;
70}
71
72/* ボタン */
73.button {
74	font-size: 1.375rem;
75	background: #0bd;
76	color: #fff;
77	border-radius: 5px;
78	padding: 18px 32px;
79}
80
81.button:hover {
82	background: #0090aa;
83}

試したこと

cssに以下のコードを追記してみましたが、結果は変わりませんでした。

css
1.wrapper h2 {
2	max-width: 2000px;
3}

予想

予想では.wrapperのmax-widthが1100pxに対し、左右のpaddingが4%とあるので、ブラウザの画面幅を広げていくごとに同じく広がっていくpaddingと1100pxの閾値に圧迫されて改行されてしまうのでは？と思っています。

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

OS:windows10
開発環境:Sublime Text 3
文字コード:UTF-8
ブラウザ:Google Chrome
参考書:「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」　Mana

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

回答1件

ベストアンサー

予想では.wrapperのmax-widthが1100pxに対し、左右のpaddingが4%とあるので、ブラウザの画面幅を広げていくごとに同じく広がっていくpaddingと1100pxの閾値に圧迫されて改行されてしまうのでは？と思っています。

その予想通りだと思います。
paddingが4%と相対的なものなので、画面幅が広がるとそれに応じてpaddingの値も大きくなり、改行されてしまいます。よって、

※条件として、headerのwrapperの設定はそのままにしておきたいです。

とのことですが、この部分の設定を変更(固定値で指定)しないと解決できません。
wrapperクラスは他でも設定されているので、他への影響を懸念されてのことなら、
セレクターで対象を限定して、さらにメディアクエリで特定の幅(1760px以上)に限定するなどしたらどうでしょう。

下記を現状の.wrapper の後に追加します。

css
1@media screen and (min-width: 1700px) {
2  .home-content.wrapper {
3    padding: 0 70px;
4  }
5}

投稿2021/02/28 13:35

hatena19

総合スコア33775

yutty_TAC

2021/03/01 14:49

解決できました！お忙しい中ご回答ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！