横方向のスクロールバーを消したい

前提

パーソナルサイトを作っています。
画像の赤矢印のようになぜか横方向にスクロールバー（？）が表示されます。

実現したいこと

このバーを消したいです。

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>Iori's Website</title>
9
10  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
11    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
12  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
13    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
14  </script>
15
16  <!-- FAVICON -->
17  <link rel="icon" href="./images/icons8-ココナッツ-48 (1).png">
18
19  <!-- slick 👩‍🎓headとbody終わりの直前-->
20  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
21  <link rel="stylesheet" type="text/css"
22    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
23
24  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
25
26
27  <!-- Font Awesome -->
28  <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>
29
30
31
32
33  <link rel="stylesheet" href="styles.css">
34  <!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> -->
35
36</head>
37
38
39
40
41<body class="text-center">
42
43
44  <!-- NAVBAR -->
45
46  <nav class="navbar navbar-expand-lg  navbar-transparent">
47    <a class="navbar-brand" href="">yoriss67</a>
48
49    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
50      aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
51      <span class="navbar-toggler-icon"></span>
52    </button>
53
54
55
56    
57    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
58
59      <ul class="nav navbar-nav ms-auto flex-row ">
60        <li class="nav-item pl-3">
61
62            <i class="fa-brands fa-2x fa-github"><a href="https://github.com/yoriss67" target="_blank"></a>
63            </i>
64
65          <!-- <a class="nav-link" href="">Contact</a> -->
66        </li>
67        <li class="nav-item pl-3">
68
69          <i class="fa-brands fa-2x fa-twitter"> <a href="https://twitter.com/iori73wsy" target="_blank"></a>
70          </i>
71          <!-- <a class="nav-link" href="">Pricing</a> -->
72        </li>
73        <li class="nav-item pl-3">
74
75          <i class="fa-brands fa-2x fa-instagram"> </i>
76          <a href="https://www.instagram.com/ioriiii_13/" target="_blank"></a>
77
78          <!-- <a class="nav-link" href="">Download</a> -->
79        </li>
80      </ul>
81    </div>
82  </nav>
83
84
85  <!-- HEADER -->
86
87
88  <header id="header">
89    <div>
90      <h1 class="fadeIn inview">Thank you for visiting.</h1>
91    </div>
92    <div class="">
93      <p class="fadeIn inview" data-test-daa="This is a test">I'm Iori.</p>
94    </div>
95    </style>
96
97
98  </header>
99
100
101
102  <div class="aboutme">
103    <h1>About Me</h1>
104
105    <div class="row">
106      <div class="col-md-6" id="colLeft">
107        <img class="imgprofile" src="images/8fdb71d0-e360-4b74-9761-7795784871bd-0-modified.png" alt="my-profile"
108          width="200px" height="200px">
109      </div>
110      <div class="col-md-6">
111        <p>I'm a sophomore student at a university in Japan. My major is English and Social Science.
112          <br><br>I have started studying programming out of mainly curiosity and a bit of hope to make use of it for my
113          future career.</p>
114      </div>
115    </div>
116
117    <!-- <a href="https://www.notion.so/396eca31a8f44b5c989ac4b8efa302f0?v=c3d6906ee5654da9a5534cfa7b0b79bc&p=d67a03c53bd949b0902f76774734cf57&pm=s" target="_blank">Here's my Notion.</a> -->
118
119  </div>
120
121  <!-- WHATILIKE -->
122  <div class="whatilike">
123    <h1>What I like</h1>
124
125    <div class="slider">
126      <div><img src="images/surfers.jpg" alt="surfers" /></div>
127      <div><img src="images/circle.jpg" alt="circle" /></div>
128      <div><img src="images/kelia.jpg" alt="kelia" /></div>
129      <div><img src="images/sunset.jpg" alt="sunset" /></div>
130      <div><img src="images/surfboy.jpg" alt="surfboy" /></div>
131      <div><img src="images/yogurt.jpg" alt="yogurt" /></div>
132      <div><img src="images/palmtree.jpg" alt="palmtree" /></div>
133      <div><img src="images/yoga.jpg" alt="yoga" /></div>
134
135    </div>
136  </div>
137  </div>
138
139  <!-- <div class="row">
140    <div class="col-md-8">
141 -->
142
143
144  <h1>Works</h1>
145  <div class="works">
146
147    <ul>
148      <li id="travelBlog">
149        <div>
150          <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
151            <img src="./images/images06.jpg" alt="images06">
152            <h5>Travel Blog</h5>
153          </a>
154
155        </div>
156        <div>
157
158          <small> Sep 2022 </small>
159          <p>This is my first reproduction.</p>
160
161        </div>
162
163      </li>
164
165
166      <li id="travelBlog">
167        <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
168          <img src="./images/images06.jpg" alt="images06">
169          <h5>Travel Blog</h5>
170        </a>
171        <span> Sep 2022 </span>
172      </li>
173
174      <li id="travelBlog">
175        <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
176          <img src="./images/images06.jpg" alt="images06">
177          <h5>Travel Blog</h5>
178        </a>
179        <span> Sep 2022 </span>
180      </li>
181
182    </ul>
183
184    <!-- </div>
185
186      </div> -->
187
188    <!-- ⭐⭐⭐⭐⭐ -->
189    <!-- <div class="col-md-3">
190
191        <div class="mywebdevelopmentpath"> -->
192    <!-- <h1>My Web Development Diary</h1>
193
194          <ul>
195            <li>aaaaaaaaa</li>
196
197            <li>aaaaaaaaaa</li>
198
199            <li>aaaaaaaaa</li>
200
201            <li>aaaaaaaa</li>
202
203            <li></li>
204
205          </ul> -->
206
207
208    <!-- Web Dev Blog-->
209    <!-- <button data-modal-id="modal-1">Open Modal 1</button>
210        <button data-modal-id="modal-2">Open Modal 2</button>
211    
212        <div id="modal-1">Modal 1</div>
213        <div id="modal-2">Modal 2</div> -->
214
215
216
217
218    <!-- <i class="fa-solid fa-book"></i> -->
219
220  </div>
221
222
223  <!-- <h1>English Study</h1>
224
225      </div> -->
226
227  <!--  ⭐⭐⭐⭐⭐-->
228
229
230
231
232
233  </div>
234
235
236
237  <h1>Contact</h1>
238
239  <div class="contact">
240    <div class="github marking">
241      <i class="fa-brands fa-2x fa-github"></i>
242      <a href="https://github.com/yoriss67" target="_blank">yoriss67</a>
243    </div>
244
245    <div class="twitter marking">
246      <i class="fa-brands fa-2x fa-twitter"></i>
247      <a href="https://twitter.com/iori73wsy" target="_blank">Iori67</a>
248    </div>
249
250    <div class="instagram marking">
251      <i class="fa-brands fa-2x fa-instagram"> </i>
252
253      <a href="https://www.instagram.com/ioriiii_13/" target="_blank">ioriii_13</a>
254    </div>
255
256  </div>
257
258
259
260
261
262
263
264  <!-- inview CDN -->
265  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
266  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js">
267  </script>
268
269
270  <!-- inview download -->
271
272  <!-- <script src="./jquery.inview.min.js"></script> -->
273
274  <!-- slick -->
275  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
276  </script>
277
278
279
280
281  <script src="index.js"></script>
282
283
284</body>
285
286</html>

CSS
1* {
2    background-attachment: fixed;
3}
4
5h1 {
6    font-weight: bold;
7    text-align: center;
8}
9
10
11
12/* NAVBAR */
13
14nav {
15background-color: transparent;
16}
17
18.navbar-nav {
19    /* background-color: rgba(226, 241, 252, 0.8); */
20    margin-top: 10px;
21}
22
23.navbar {
24    padding: 10px 20px;
25    background-color: transparent;
26}
27
28.navbar-brand {
29    font-weight:  bold;
30    color: black;
31}
32
33.nav-item {
34    padding: 0 10px;
35    display: flex;
36}
37
38.flex-row {
39justify-content: space-around;  
40
41}
42
43.navbar-toggler {
44   border: 1px solid;
45   color: rgba(157, 177, 165, 0.54);
46}
47
48/* HEADER */
49
50
51header {
52    padding: 300px 0;
53    background-image: url(images/top.jpg);
54    height: 50px;
55    margin-bottom: 20px;
56}
57
58.fadeIn {
59    color: #fff;
60    opacity: 0;
61    transition: 1s;
62
63}
64
65.fadeIn.is-show {
66    opacity: 1;
67}
68
69
70
71/* ABOUT ME */
72
73.aboutme {
74    margin-bottom: 20px;
75
76}
77
78.imgMyprofile {
79    margin-top: 20px;
80    margin-bottom: 20px;
81}
82
83.col-md-6>p {
84    text-align: left;
85    padding-top: 2rem;
86    /* padding-left: 2em; */
87    left: 3%;
88    align-items: center;
89
90}
91
92
93@media screen and (min-width: 768px) {
94
95
96    .imgprofile {
97        text-align: center;
98    }
99
100    .col-md-6 {
101        align-items: center;
102        flex-wrap: wrap;
103        box-sizing: border-box;
104        width: 50%;
105        border-left: 5px;
106
107    }
108
109    .col-md-6> p {
110        padding-right: 9rem;
111    }
112
113    #colLeft {
114        padding-left: 15em;
115        padding-right: 0;
116    }
117
118}
119
120
121@media screen and (max-width: 768px) {
122    .col-md-6>p {
123        text-align: center;
124    }
125}
126
127
128
129/* WHAT I LIKE */
130
131.whatilike {
132    margin: 20px auto;
133}
134
135.slider img {
136    width: 95%;
137}
138
139/* @media screen and (max-width: 768px) {
140.slider img {
141    width: 90%;
142}
143} */
144
145
146/* ROW */
147
148/* .row {
149    display: flex;
150    margin-top: 50px;
151    margin-left: 0;
152    margin-right: 0;
153}
154 */
155
156/* WORKS */
157
158
159.works {
160    display: flex;
161    /* flex-wrap: wrap; */
162    width: 80%;
163margin: 0 auto;
164}
165
166.works li {
167    
168    list-style: none;
169}
170
171
172
173
174.works ul {
175    display: flex;
176}
177
178.works img {
179    width: 80%;
180    height: auto;
181}
182
183
184
185/* MY DEVELOPMENT DIARY */
186
187/* .col-md-3 ul {
188    list-style-type: none;
189} */
190
191/* ENGLISH STUDY */
192
193
194
195
196/* CONTACT */
197.contact .marking{
198    margin: 30px auto;
199}
200
201@media screen and (min-width: 768px) {
202    .contact {
203
204        display: flex;
205        justify-content: center;
206        align-items: center;
207    }
208
209    .marking {
210        padding: auto 2em;
211    }
212}
213
214a {
215    text-decoration: none;
216}
217
218
219

試したこと

CSSのpadding, marginを一つずつ消して変化を見てを繰り返しましたが変わりませんでした。

アドバイスよろしくお願いいたします。

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

回答1件

ベストアンサー

Grid system (グリッドシステム) · Bootstrap v5.0

グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させます。

つまり、コンテナ(container)、行(row)、列(col) をセットで使う必要があるということです。リンク先のサンプルコードを参照してください。

ということで、下記のように修正すればいいでしょう。

html
1<!-- 前略 -->
2
3  <div class="aboutme container"> <!-- ここのクラスにcontainerを追加 -->
4    <h1>About Me</h1>
5
6    <div class="row">
7      <div class="col-md-6" id="colLeft">
8
9<!-- 後略 -->
10