画面幅が合わずにオーバーしてしまっています。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- Bootstrap CSS -->
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9    <link rel="stylesheet" href="style.css">
10    <title>tit</title>
11  </head>
12  <body>
13    
14      
15    <div class="breadcrumb bg-white">
16        Home > Services > Strategy Consulting
17    </div>
18    <div class="category-title text-center">
19        Strategy Consulting
20    </div>
21        <div class="row mb-5">
22            <div class="col-lg-5 about-us">
23                <p class="">“Lorem ipsum dolor sit.</p>
24                <p>“Lorem ipsum dolor sit</p>
25                <p class="strategy-title">What </p>
26                <p class="list"> ✓　Lorem  </p>
27                <p class="list"> ✓　Lorem  </p>
28                
29            </div>
30            <div class="col-lg-7 about-us-pic">
31                <div class="circle" href="~">
32                    <span>1<br>sample</span>
33                  </div>
34            </div>
35        </div>
36    <footer class="footer m-2">
37        <div class="footer-block">
38            <div class="row">
39                <!-- Footer Location-->
40                <div class="col-lg-4">
41                    <p class="company-name">company name</p>
42                    <p class="company-address">
43                        address
44                        <br />
45                        address
46                        <br />
47                        address
48                    </p>
49                </div>
50                <!-- Footer Logo-->
51                <div class="col-lg-4 footer-logo">
52                    <a href="#"><img class="logo-image" src="img/logo-bottom.jpg" alt=""></a>
53                </div>
54                <!-- Footer About Text-->
55                <div class="col-lg-4 company-right">
56                    <p class="company-name">copy right</p>
57                    <p class="contact-details">
58                      <a href="#" class="text-dark">Email |</a>
59                      <a href="#" class="text-dark">Phone | </a>
60                      <a href="#" class="text-dark">Facebook</a> <br>
61                        <a href="#" class="text-dark">Subscribe Newsletter</a>
62                    </p>
63                </div>
64            </div>
65        </div>
66    </footer>
67</body>
68<!-- Optional JavaScript -->
69<!-- jQuery first, then Popper.js, then Bootstrap JS -->
70<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
71<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
72<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
73<script type="text/javascript" src="javascript.js"></script> 
74<script>
75  $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
76      if(this.id != 'navbarDropdown'){
77        $('.navbar-collapse').collapse('hide');
78      }
79  });
80  </script>
81</body>
82</html>

CSS
1
2.navbar {
3  position: relative;
4  z-index: 1;
5}
6
7.logo-img {
8  width: 15vw;
9}
10/* ロゴ画像レスポンシブ */
11@media (max-width: 576px) {
12  .logo-img {
13    width: 60%;
14  }
15}
16.nav-link {
17    font-size: 1.2vw;
18    font-weight: bold;
19    line-height: 1px;
20    font-family: normal;
21}
22/* アコーディオンメニューのCSS */
23@media only screen and  (max-width: 991px) {
24  .navbar-collapse {
25    text-align: center;
26    background-color: transparent;
27    display        : inline-block;
28    color          : #ffffff;            /* 文字の色 */
29    font-size      : 36pt;               /* 文字のサイズ */
30    letter-spacing : 4px;                /* 文字間 */
31    text-shadow    : 
32         2px  2px 1px #003366,
33        -2px  2px 1px #003366,
34         2px -2px 1px #003366,
35        -2px -2px 1px #003366,
36         2px  0px 1px #003366,
37         0px  2px 1px #003366,
38        -2px  0px 1px #003366,
39         0px -2px 1px #003366;  
40  }
41}
42/* ふわっとヘッダー文字を表示させ切り替える時のCSS */
43.fadein1 {
44  animation: fadein 3s ease-in-out infinite alternate both;
45}
46.fadein2 {
47  animation: fadein 3s ease-in-out 3s infinite alternate both;
48}
49.fadein.scrollin {
50  opacity: 1;
51  transform: translate(0, 0);
52}
53@keyframes fadein {
54  0%{
55    opacity: 0;
56  }
57  20%{
58    opacity: 0;
59  }
60  }
61/* ヘッダー画像をnavの下に潜り込ませるCSS */
62    
63  .cover-img {
64    height: 100%;  
65    display: table;
66    width: 100%;
67    background-size: cover;
68    position: absolute;
69    top: 0;
70    left: 0;
71  }
72  .cover-img-wrapper {
73    height: 600px; 
74    position: relative;
75  }                
76  /* ワイドスクリーン用のCSS */
77  
78  @media only screen and (min-width: 1500px) {
79    .cover-img-wrapper {  /* 修正 */
80      height: 1200px;
81    }
82  }
83  /* タブレット用のCSS */
84  
85  @media only screen and (min-width: 768px) and (max-width: 1500px) {
86    .cover-img-wrapper {  /* 修正 */
87      height: 800px;
88    }
89  }
90  /* スマホ用のCSS */
91  @media only screen and (max-width: 479px) {
92    .cover-img-wrapper  {
93      height: 300px;
94    }
95  }
96.cover-text {
97  display: table-cell;
98  vertical-align: middle;
99  text-align: center;
100}
101.catch-copy p {
102  margin: 0 auto;
103  padding: 0 0.8em;
104  font-size: 3vw;
105  text-align: center;
106}
107/* スマホ用のCSS */
108@media only screen and (max-width: 479px) {
109  .catch-copy p {
110    margin: 0 auto;
111    padding: 0 0.8em;
112    font-size: 3vw;
113    text-align: center;
114  }
115}
116.catch-copy-2 p {
117  margin-top: -7.2vw;
118  font-size: 3vw;
119}
120/* スマホ用のCSS */
121@media only screen and (max-width: 479px) {
122  .catch-copy-2 p {
123    margin: 0 auto;
124    padding: 0 0.8em;
125    font-size: 4vw;
126    text-align: center;
127    margin-top: -40px;
128  }
129}
130.box {
131  display: flex;
132  align-items: center;
133  justify-content: center;
134  flex-direction: column;
135  width: 100vw;
136  height: 35vw;
137  text-align: center;
138}
139.box img {
140  opacity: 0;
141  transition: opacity 1s ease;
142}
143.box:hover img {
144  opacity: 1;
145}
146.project-image {
147  padding: 0;
148  margin: 0;
149  height: 100%;
150  width: 100%;
151}
152.project-category {
153  position: relative;
154}
155.project-category p {
156  position: absolute;
157  top: 50%;
158  left: 50%;
159  -ms-transform: translate(-50%,-50%);
160  -webkit-transform: translate(-50%,-50%);
161  transform: translate(-50%,-50%);
162  margin:0;
163  padding:0;
164  font-size: 5vw;
165  font-weight: 600;
166  }
167/* Footer  */
168.footer {
169  padding-top: 1rem;
170}
171.company-name {
172  font-size: 1.5vw;
173  font-weight: 500;
174}
175.company-address {
176  font-size: 1.5vw;
177  font-weight: 400;
178}
179.logo-image {
180  width: 80%;
181}
182.contact-details {
183  font-size: 1.2vw;
184  margin-top: 60px;
185}
186
187.footer-logo {
188  margin-top: 100px; 
189}
190.company-right {
191  text-align: right;
192}
193/* footerのスマホ用CSS */
194@media only screen and (max-width: 992px) {
195 .footer-block {
196   text-align: center;
197 }
198 .company-name {
199   font-size: 20px;
200 }
201 .company-address {
202  font-size: 14px;
203}
204.logo-image {
205  width: 70%;
206}
207.footer-logo {
208  margin-top: 0px; 
209}
210.company-right {
211  text-align: center;
212}
213.contact-details {
214  font-size: 14px;
215  margin-top: 0px;
216}
217}
218
219.category-title {
220  color:#2250a2;
221  font-size: 3vw;
222  font-weight: 400;
223}
224
225.contact-description {
226  color:#2250a2;
227  font-size: 2vw;
228}
229
230.rectangle {
231  width: 100%;
232  height: 5vw;
233  margin: 1vw 0;
234  padding: 2vw;
235}
236
237.image-bottom {
238  width: 100%;
239}
240
241.category-title {
242  margin-bottom: 4vw;
243}
244
245.about-us {
246  padding: 0 3vw;
247  font-weight: 500;
248  font-size: 1.2vw;
249}
250
251.chairman-pic {
252  width: 47vw;
253}
254
255@media only screen and (max-width: 992px) {
256  .chairman-pic {
257    width: 100vw;
258  }
259  .about-us-pic {
260    order: 1;
261  }
262  .about-us {
263    order: 2;
264  }
265}
266/* スマホ用のCSS */
267@media only screen and (max-width: 479px) {
268  .about-us {
269    font-size: 1rem;
270  }
271}
272.list {
273  line-height: 1px;
274}
275.strategy-title {
276  margin-bottom: 1vw;
277}
278.circle {	
279  position: relative;
280  display: inline-block;
281  width: 80px;
282  height: 80px;
283  border-radius: 50%;
284  background: skyblue;
285}
286
287.circle span {
288  position: absolute;
289  display: inline-block;
290  left: 0;
291  top: 50%;
292  -webkit-transform: translateY(-50%);
293  transform: translateY(-50%);
294  width :80px;
295  text-align:center;
296}

firegrape

2020/10/17 15:10

Larkiwing

2020/10/17 15:14

画面下のバーから表示されるように右にスペースが入ってしまっています。画像も貼り付けました。ご協力ありがとうございます。

Larkiwing

2020/10/17 15:54

<nav class="navbar navbar-expand-lg navbar-light pt-4 pb-4" style=background-color:#2250a2;> <a class="navbar-brand" href="#"> <img class="logo-img" src="img/logo4.png" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">Services</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">Publications</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">Partners & Career</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">News</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">About</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">Contact</a> </li> <li class="nav-item mr-4"> <a class="nav-link text-white" href="#">JP|EN</a> </li> </ul> </div> </nav> を<body>直下にするとOKです。ありがとうございます。

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

回答1件

ベストアンサー

回答になっているかわかりませんが、以下のCSSを
.m-2 {
margin: 0.5rem!important;
}

.m-2 {
margin: 1rem!important;
}
にしたらスクロールはでないですが、これではダメでしょうか？

投稿2020/10/17 15:26

firegrape

総合スコア902

Larkiwing

2020/10/17 15:41

回答ありがとうございます。 footerの部分だけ貼り付けているのですが、実は上にコンテナやnavbarがありまして、コードを貼り付けるとあまり変わっていないように見受けられます。他のコードを貼り付けますので、よろしくお願いいたします。

firegrape

2020/10/17 15:48

はい、コードは貼り付けましたか？

Larkiwing

2020/10/17 15:50

本文は30〜10000文字以内で入力してください ↑の文字がでていまして、今対応中です。('◇')ゞ

firegrape

2020/10/17 16:02

はい、見ました。さっきの修正なしで、以下を変更すればスクロールなしで大丈夫ですけど、どうですか？ .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } ↓ .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: 0px; margin-left: 0px; }

Larkiwing

2020/10/17 16:05

やっとできました。ありがとうございます！！これでやっと今夜寝れます。(*^^*)

firegrape

2020/10/17 16:07

良かったです！おやすみなさい(^^)

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