divに入れたテキストがはみ出てしまいます。

モバイルサイトのヘッダーにメニューとダウンロードボタンを作りたいのですが、
ダウンロードという文字が外に出てしまいます。

http://spiritualcompany.net/website/mosya/index.html

右側のオレンジ色の枠内にDownloadという文字を入れたいのですが、外にでてしまいます。
MENUと同じ構造を使っているのですが、なぜかはみ出ます。

html
1<body>
2
3  <header>
4    <img src="img/logo.svg" alt="logo" class="title-logo">
5    <div class="air"></div>
6    <div class="menu"><i class="fas fa-bars"></i><div class="text">MENU</div></div>
7    <div class="downloadimg"><i class="fas fa-cloud-download-alt"></i><div class="text">Download</div></div>
8  </header>
9  
10</body>

css
1.menu{
2  display: block;
3  width: 50px;
4  height: 60px;
5  background: #039de7;
6  color: white;
7  font-size: 12px;
8  cursor: pointer;
9  transition: .3s;
10  text-align: center;
11  line-height: 60px;
12  padding: 0 8px;
13}
14
15.title-logo{
16  width: 104px;
17  height: 26px;
18}
19
20.downloadimg{
21  display: block;
22  width: 50px;
23  height: 60px;
24  background: orange;
25  color: white;
26  font-size: 12px;
27  cursor: pointer;
28  transition: .3s;
29  text-align: center;
30  line-height: 60px;
31  padding: 0 8px;
32}
33
34.menu i{
35  display: block;
36  margin-top: 12px;
37}
38
39.menu .text{
40  line-height: 12px;
41  margin-top: 8px;
42}
43
44.menu .text2{
45  line-height: 12px;
46}

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

回答1件

ベストアンサー

.menu以下にはスタイルを当てているのに、.downloadimg以下には当てていないからです。
.menuと同じように以下を追記しましょう。
.text2は今回の件とは関係ありませんが、一応足してます。

CSS
1.downloadimg i {
2  display: block;
3  margin-top: 12px;
4}
5
6.downloadimg .text {
7  line-height: 12px;
8  margin-top: 8px;
9}
10
11.downloadimg .text2 {
12  line-height: 12px;
13}

.menu配下と.downloadimg配下が同じスタイルでいい場合は、以下のようにしときましょう。

CSS
1.menu i, .downloadimg i {
2  display: block;
3  margin-top: 12px;
4}
5
6.menu .text, .downloadimg .text {
7  line-height: 12px;
8  margin-top: 8px;
9}
10
11.menu .text2, .downloadimg .text2 {
12  line-height: 12px;
13}

投稿2021/04/22 10:55

root_jp

総合スコア4666

dobashi

2021/04/22 11:18

ありがとうございます！ .downloadimgのスタイルだけ見ていて、付随するiやtextまでは見ていませんでした。ずっと考えて分からなかったので、感謝です。まとめる書き方までありがとうございます。

root_jp

2021/04/22 11:24

蛇足ですが、.menu と .downloadimg も background 以外は全て同じなので、以下のような感じにしといた方が修正が楽ですよ。 .menu, .downloadimg { display: block; width: 50px; height: 60px; color: white; font-size: 12px; cursor: pointer; transition: .3s; text-align: center; line-height: 60px; padding: 0 8px; } .menu{ background: #039de7; } .downloadimg{ background: orange; }

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