【html，css】要素が外にはみ出し修正できない

現在、webページの模写をしています。

問題点として、boxが外にはみ出し修正することができません。
お手数ですが、どなたかお知恵を貸していただけないでしょうか。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="stylesheet.css">
8    <title>Coding school</title>
9</head>
10<body>
11    <div class="container-float">
12        <div class="row">
13            <div class="top-view col-lg-12">
14                <div class="text-box">
15                    <img src="logo.png">
16                    <ul>
17                        <li>ログアウト</li>
18                        <li>お問い合せ</li>
19                    </ul>
20                </div>    
21                <div class="top-image">
22                    <img src="top_image.jpg">  
23                    <p>No Coding No Life</p> 
24                </div>
25            </div>
26        </div>
27    </div>
28
29    <div class="container-float">
30        <div class="row">
31            <div class="course-menu">
32                <div class="message">
33                    <h3>コース一覧</h3>
34                </div> 
35                <div class="course">
36                    <a href="" class="image-box">
37                        <img src="wordpress.png">
38                        <p>WordPressの基礎を理解し、２つのテーマ開発を目指します。
39                            実務に近い形で学習します。
40                        </p>           
41                    </a>
42
43                    <a href="" class="image-box"> 
44                        <img src="shopify.jpg">
45                        <p>Spopifyを用いて３つのECサイトを構築することを通して、基礎と応用を学んでいきます。</p>
46                    </a>
47                    <a href="" class="image-box">
48                        <img src="rails.jpg">
49                        <p>RubyとRuby on Railsを３つのアプリケーションを開発することを通して学びます。</p>
50                    </a>
51                    <a href="" class="image-box">
52                        <img src="ai.jpg">
53                        <p>Pythonの基礎を学習したあと、３つの機械学習プログラムを作成することを目指します。</p>
54                    </a>
55                </div>
56                <div class="text-more">
57                    <a href="">もっと見る</a>
58                </div>
59            </div>
60        </div>
61    </div>
62
63    <div class="container-float">
64        <div class="row">
65            <div class="introduse">
66                <div class="message">
67                    <p>講師紹介</p>
68                </div>
69                <div class="introduse-photo">
70                    <img src="teacher1.png">
71                    <h5>Yuma Kodama</h5>
72                    <p>システムエンジニア歴約20年、プログラミング歴約35年。プログラミングの守備範囲は、フロントエンド、サーバサイド、Android開発と広く、普段はシステム開発プロジェクトの管理や後輩の指導を行っています。</p>
73                </div>
74                <div class="introduse-photo"> 
75                    <img src="teacher2.png">
76                    <h5>Yuta Mizuta</h5>
77                    <p>lot技術をベースに、ハードウェアからクラウドまでを広くカバーする他、小学生から大人まで幅広く、プログラミングに関する指導経験があります。</p>
78                </div>
79            </div>
80        </div>
81    </div>
82
83    
84    <div class="container-float">
85        <div class="row">
86            <div class="foot">
87                <p>@Copyright2020 Coding School.All Rights. Reserved.</p>
88            </div>
89        </div>
90    </div>
91
92    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
93    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
94    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
95</body>
96</html>

css
1.top-view{
2    position:relative;
3}
4
5.text-box{
6    background-color:black;
7    box-sizing:padding-box;
8    position:absolute;
9    z-index:1;
10    width:100%;
11}
12
13li{
14    color:white;
15    list-style:none;
16    float:right;
17    padding:1rem;
18}
19
20.text-box img {
21    display:inline;
22    width:10rem;
23    height:2.5rem;
24    padding-left:1.5rem;
25    margin: 0.5rem 0.5rem 0.5rem 0;
26    float:left;
27}
28
29.top-image {
30    position:relative;
31    
32}
33
34.top-image p{
35    position:absolute;
36    font-size:2.8rem;
37    top: 50%;
38    left: 50%;
39    -ms-transform: translate(-50%,-50%);
40    -webkit-transform: translate(-50%,-50%);
41    transform: translate(-50%,-50%);
42    margin:0;
43    padding:0;
44    color:white;
45}
46
47.top-image img {
48    width:100%;
49}
50
51.image-box {
52    display:inline-block;
53    margin:1rem;  
54}
55
56.image-box img{
57    width:8rem;
58    height:4rem;
59}
60
61.course-menu {
62    margin-top:2rem;
63    width:100%;
64}
65
66.message h3{
67    text-align: center;
68}
69
70.course a p {
71    width:8rem;
72    font-size:0.5rem;
73    box-shadow:0rem 0rem 0.3rem;
74    border:1rem solid white;
75}
76
77.line {
78    border:1rem solid black;
79}
80   
81
82.text-more{
83    text-align:center;
84}
85
86.text-more a {
87    padding:1rem 3rem;
88    box-shadow:0rem 0rem 0.3rem;
89    border:1px solid white;
90
91}
92.introduse {
93    border-radius:15px;
94}
95
96parson-image{
97    border-radius:5rem;
98}
99
100.course {
101    
102}
103
104.introduse {
105    margin-top:3rem;
106}
107
108.message p {
109    font-size:2rem;
110    text-align:center;
111}
112
113.introduse-photo {
114    padding:0 8rem 1rem 8rem;
115}
116
117.introduse-photo img {
118    border-radius:50%;
119    width:6rem;
120    height:6rem;
121    float:left;
122    margin-right:2rem;
123}
124
125.introduse-photo p {
126    font-size:0.7rem;
127}
128
129.foot{
130    background-color:black;
131    width:100%;
132    height:3rem;
133    margin-top:1rem;
134
135}
136
137.foot p {
138    color:white;
139    font-size:0.7rem;
140    padding:1rem 0 1rem 0;
141    text-align:center;
142}

【試したこと】
・width:calc(100% - ●rem)
・box-sizing:border-box;

これらは試しましたが、改善できませんでした。

使用pcはMac、エディターはVisual Studio Codeです。

どうかよろしくお願いします????‍♂️

【ーーーーーーーーーーーーーーーーー追記ーーーーーーーーーーーーーーーーーーーーー】
対応が遅くなり申し訳ありません????

　ブラウザはSafariでバージョン14.0.1 になります。

●現在の画像
![

　以上が、Visual Studio CodeのLive Serverでイメージを表示させたものになります。
※他者の教材ですので一部画像を消しているのはご了承ください????‍♂️

●やりたいこと
ログアウトの下の画像（class="top-image"）にページの横幅を合わせたいと思っています。
しかし、class="text-box",コース一覧のところのcontainer-fluid(黒線)やcourse-menu（灰線）がはみ出てしまっているので困っています。

申し訳ありませんがよろしくお願いします????‍♂️

m.ts10806

2020/12/18 23:53

確認しているブラウザとバージョンあと現在の状況が分かる画面キャプチャと「どうしたいのか」完成イメージを提示してください。

kai0310

2020/12/19 00:20

> 問題点として、boxが外にはみ出し修正することができません。 boxがどれに該当するか分かりませんでしたので、そちらも明記していただけると回答しやすいです。

Kei-Kei

2020/12/20 00:48

対応が遅れて申し訳ありません????‍♂️ ご指摘がいただいたところを追記させていただきましたので、お手数ですが確認いただけると幸いです。何卒よろしくお願いします。

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

回答1件

ベストアンサー

こんにちは。

.text-boxが親要素をオーバーフローしている、ということでしょうか？

でしたら、position: absoluteが原因です。

解決方法は、position: absoluteを削除することです。
ただ、もしこのposition: absoluteをclearfix代わりに使っているのであれば、別の方法（たとえばdisplay: flow-root）を追加する必要があります。

蛇足ですが、container-float は container-fluid の間違いではありませんか？

投稿2020/12/19 02:43

Lhankor_Mhy

総合スコア36158

Kei-Kei

2020/12/20 00:53

返信が遅れて申し訳ありません????‍♂️ absoluteを外してみましたが改善が見込めませんでした。 display: flow-rootについて、私の学習不足でまだよく分かっていませんので、調べて試してみようと思います！蛇足なんてとんでもございません！ご指摘ありがとうございます。訂正させていただきました。今後も、よろしければ何卒よろしくお願いします。