検証ツールでレスポンシブすると右にズレたりズレなかったりする

実現したいこと

レスポンシブした時にずれないようにしたいです

発生している問題・分からないこと

検証ツールでレスポンシブすると右にズレる時とズレない時があります。どうやったらズレなくなるのでしょうか？どの部分が原因かわからないため、長くなり申し訳ありませんが、すべてのHTML、SP部分のCSSを記載します。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>明るいHOUSE（自分）</title>
7<link rel="preconnect" href="https://fonts.googleapis.com">
8<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
10<link rel="stylesheet" href="css/style.css">
11<!-- 自作のCSS -->
12<link rel="stylesheet" type="text/css" href="css/5-2-1.css">
13    
14</head>
15<body>
16<header>
17    <a href="#"  id="logo"><img src="img/favicon.png" alt="ロゴ">DELIGHT HOUSE</a>
18    <!-- ナビゲーション -->
19     <ul class="nav-pc">
20        <li><a href="index.html">私たちについて</a></li>
21        <li><a href="index.html">サービス</a></li>
22        <li><a href="index.html">商品情報</a></li>
23        <li><a href="index.html">展示会</a></li>
24        <li><a href="index.html">暮らしの日記</a></li>
25        <li><a href="index.html">会社概要</a></li>
26     </ul>
27     <ul id="sns" class="nav-pc">
28        <li><a href="index.html">Twitter</a></li>
29        <li><a href="index.html">Facebook</a></li>
30        <li><a href="index.html">instagram</a></li>
31     </ul>
32     <!-- ハンバーガーメニュー -->
33     <div class="openbtn"><span></span><span></span><span></span></div>
34     <!-- SP用ナビゲーションメニュー -->
35     <nav id="g-nav">
36        <div id="g-nav-list"><!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
37        <ul>
38            <li><a href="index.html">私たちについて</a></li>
39            <li><a href="index.html">サービス</a></li>
40            <li><a href="index.html">商品情報</a></li>
41            <li><a href="index.html">展示会</a></li>
42            <li><a href="index.html">暮らしの日記</a></li>
43            <li><a href="index.html">会社概要</a></li>
44            <li><a href="index.html">Twitter</a></li>
45            <li><a href="index.html">Facebook</a></li>
46            <li><a href="index.html">instagram</a></li>
47        </ul>
48   
49
50     
51        </div>
52        </nav>
53
54</header>
55
56<main>
57<!-- メインビジュアル -->
58<div class="video">
59    <video src="img/2110972-uhd_3840_2160_30fps.mp4"autoplay loop muted playsinline></video>
60</div>
61<!-- 建築事例を紹介 -->
62<section id="project">
63    <div class="wrapper">
64    <h2 class="section-title">建築事例を紹介</h2>
65    <div id="pj-all">
66    <div id="pj-left">  
67        <a  class="pj-name1" href="#">
68        <img src="img/project1.jpg" alt="広い庭のある家">
69        <p class="name">PROJECT_01</p>
70        </a>
71        <a class="pj-name2" href="#">
72        <img src="img/project2.jpg" alt="白い外観の家">
73        <p class="name">PROJECT_02</p>
74        </a>
75    </div>
76    <div id="pj-right">
77        <a class="pj-name3" href="#">
78        <img src="img/project3.jpg" alt="海の見える家">
79        <p class="name">PROJECT_03</p>
80        </a>
81        <a class="pj-name4" href="#">
82        <img src="img/project4.jpg" alt="白い２階建ての家">
83        <p class="name">PROJECT_04</p>
84        </a>
85    </div>
86    </div>
87    </div>
88</section>
89
90<section id="feature">
91    <div class="wrapper">
92      <h2 class="section-title">明るいHOUSEの特徴</h2>
93      <div id="all-circle">
94        <div class="circle-all">
95          <div class="circle-division">
96            <a href="#" class="circle">design</a>
97          </div>
98          <div class="circle-txt">
99            <h2 class="c-title">デザイン</h2>
100            <p class="c-p">テキストテキストテキスト</p>
101          </div>
102        </div>
103  
104        <div class="circle-all">
105          <div class="circle-division">
106            <a href="#" class="circle">quality</a>
107          </div>
108          <div class="circle-txt">
109            <h2 class="c-title">性能</h2>
110            <p class="c-p">テキストテキストテキスト</p>
111          </div>
112        </div>
113  
114        <div class="circle-all">
115          <div class="circle-division">
116            <a href="#" class="circle">support</a>
117          </div>
118          <div class="circle-txt">
119            <h2 class="c-title">サポート</h2>
120            <p class="c-p">テキストテキストテキスト</p>
121          </div>
122        </div>
123      </div>
124    </div>
125  </section>
126  
127<!-- 家ができるまでの流れ -->
128<section id="flow">
129    <div class="wrapper">
130    <h2 class="section-title">家ができるまでの流れ</h2>
131    <p id="flow-p">お問い合わせいただいてから、家が完成するまでの流れです。</p>
132
133    <div id="process-inner">
134    <ol id="process">
135        <li>1.ヒアリング</li>
136        <li>2.プラン提案</li>
137        <li>3.契約</li>
138        <li>4.着工</li>
139        <li>5.完成</li>
140    </ol>
141
142    <dl id="description">
143        <dt>
144            <span>1</span>
145            ヒアリング
146        </dt>
147        <dd>
148            テキストテキストテキストテキストテキストテキストテキストテキスト
149             テキストテキストテキストテキストテキストテキストテキストテキスト 
150        </dd>
151        <dt>
152            <span>2</span>
153            プラン提案
154        </dt>
155        <dd>
156            テキストテキストテキストテキストテキストテキストテキストテキスト
157            テキストテキストテキストテキストテキストテキストテキストテキスト 
158        </dd>
159        <dt>
160            <span>3</span>
161            契約
162        </dt>
163        <dd>
164            テキストテキストテキストテキストテキストテキストテキストテキスト
165             テキストテキストテキストテキストテキストテキストテキストテキスト  
166        </dd>
167        <dt>
168            <span>4</span>
169            着工
170        </dt>
171        <dd>
172            テキストテキストテキストテキストテキストテキストテキストテキスト
173             テキストテキストテキストテキストテキストテキストテキストテキスト 
174        </dd>
175        <dt>
176            <span>5</span>
177            完成
178        </dt>
179        <dd>
180            テキストテキストテキストテキストテキストテキストテキストテキスト
181             テキストテキストテキストテキストテキストテキストテキストテキスト  
182        </dd>
183    </dl>
184</div>
185</section>
186<!-- お問い合わせ -->
187<section id="contact">
188    <div class="wrapper">
189        <h2 class="section-title">お問い合わせ</h2>
190        <p id="contact-p">お問い合わせは下記からお願いいたします。</p>
191
192    <div id="contact-inner">
193        <div class="border">
194        <a href="#" class="c-1"><img src="img/icon-document.png" alt="資料請求のマーク">資料請求</a>
195        </div>
196        <div class="border">
197        <a href="#" class="c-1"><img src="img/icon-seminar.png" alt="web説明会のマーク">WEB説明会</a>
198        </div>
199        <div class="border">
200        <a href="#" class="c-1"><img src="img/icon-talk.png" alt="個別説明会のマーク">個別相談会</a>
201        </div>
202    </div>    
203 </section>
204</main>
205 <!-- フッター -->
206  <footer>
207    <div class="wrapper">
208        <ul id="ft-item">
209            <li><a href="#">私たちについて</a></li>
210            <li><a href="#">サービス</a></li>
211            <li><a href="#">商品情報</a></li>
212            <li><a href="#">展示会</a></li>
213            <li><a href="#">暮らしの日記</a></li>
214            <li><a href="#">会社概要</a></li>
215        </ul>  
216        <p id="cr">Copyright&copy;2021 Akarui HOUSE Rights Reserved.</p>
217    </div>
218
219  </footer>
220

CSS
1@media screen and (max-width: 960px) {
2#project,#feature,#flow,#contact,footer {
3    margin-left: 0;
4}
5#logo{
6    font-size: 16px;
7}
8.openbtn{
9    display: block;
10}
11
12#logo img{
13    width: 50px;
14}
15
16.nav-pc{
17    display: none;
18}
19
20header{
21    display: flex;
22    width: 100%;
23    height: 72px;
24    background-color: #fff;
25}
26
27.video{
28    margin: 0;
29    height: 200px;
30    width: 100%;
31}
32.video video{
33    
34    overflow: hidden;
35    width: 100%;
36}
37/* 建築事例を紹介 */
38#pj-all{
39    flex-direction: column;
40}
41#pj-left, #pj-right{
42    width: 100%;
43}
44.section-title{
45    font-size: 20px;
46    margin: 60px 0 60px 0;
47}
48.section-title::before{
49    width: 16%;
50    right: 77%;
51}
52.section-title::after{
53    width: 16%;
54    left: 83%;
55}
56
57
58/* 明るいHOUSEの特徴 */
59#feature{
60    padding-bottom: 150px;
61}
62.circle{
63    font-size: 14px;
64}
65.c-title {
66    font-size: 16px;
67}
68.c-p {
69    font-size: 12px;
70}
71#process-inner{
72    flex-direction: column;
73}
74/* 家ができるまでの流れ */
75#description{
76    width: 100%;
77}
78#description dt{
79    left: 46px;
80    width: 86%;
81}
82#description dd{
83    margin: 0 0 40px 48px;
84    line-height: 1.9;
85}
86#description > dt >span{
87    height: 35px;
88    width: 35px;
89    left: -42px;
90    line-height: 34px;
91}
92#process{
93    width: 100%;
94    margin: 0;
95}
96#process > li {
97    width: calc(100vw - 50px);
98    
99}
100#process > li:before {
101    left: 1px;
102    top: 80px;
103    right: 8px;
104    bottom: 24px;
105    border-right: calc(50vw - 25px)solid transparent;
106    border-left: calc(50vw - 25px) solid transparent;
107    border-top: 36px solid #414141;
108}
109
110#process::before {
111    left: 0;
112    margin: 0 auto;
113    right: 0;
114}
115/* お問い合わせ */
116#contact{
117    padding-bottom: 120px;
118}
119#contact-inner{
120    flex-direction: column;
121    text-align: center;
122    
123}
124.border{
125    width: 60%;
126    padding: 50px 0;
127    margin: 0 auto;
128    margin-bottom: 20px;
129}
130/* フッター */
131#ft-item{
132    flex-wrap: wrap;
133    justify-content: space-around;
134    padding: 0;
135    line-height: 1.8;
136}
137#ft-item li a {
138    white-space: nowrap;
139    padding: 0 17px;
140}
141#cr{
142    margin: 60px 0 20px 0;
143}
144}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

teratailやGoogle等で検索し、チャットGPTでも聞きましたが解決できませんでした。

補足

特になし

Lhankor_Mhy

2024/10/03 06:57

ご提示のコードを試してみましたが、スクリーンショットのようにはなりませんでした。ご提示いただいていないCSSがあると思いますが、そちらが原因かもしれません。

mayu0817

2024/10/04 01:24

試してくださりありがとございます！ PC部分のCSSを記載していなかったので、PC部分含めたCSSのすべてをお送りさせていただきます。お忙しい所ありがとうございます！ *{ box-sizing: border-box; } body{ margin: 0; padding: 0; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-weight: 400; font-style: normal; } h1,h2,h3,p{ margin: 0; padding: 0; } img{ width: 100%; } /* pc用スタイル */ /* ヘッダー */ .openbtn{ display: none; } header{ width: 300px; height: 100%; overflow: auto; padding: 0 20px; position: fixed; } #logo{ text-decoration: none; color: #000; white-space: nowrap; display: flex; align-items: center; flex-wrap: nowrap; font-size: 18px; } #logo img{ width: 80px; } .nav-pc,#sns{ font-size: 14px; list-style: none; } .nav-pc a,#sns a{ text-decoration: none; color: black; } .nav-pc a{ position: relative; } .nav-pc a::after{ position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #808080; bottom: -1px; /*アンダーラインがaタグの下端から現れる*/ transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/ transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/ transition: transform 0.3s; /*変形の時間*/ } .nav-pc a:hover::after{ transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/ } ul{ line-height: 2.8; } /* メインビジュアル */ .video{ margin-left: 300px; top: -500px; min-height: 100vh; width: 100vw; overflow: hidden; } .video video{ position: fixed; z-index: -10; height: 100vh; object-fit: cover; } /* 建築事例を紹介 */ .wrapper{ max-width: 900px; margin: 0 auto; padding: 20px 17px 0 17px ; } #project{ margin-left: 300px; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); color: #fff; } #pj-all{ display: flex; justify-content: space-between; flex-wrap: wrap; } #pj-left,#pj-right{ width: 48%; } #pj-left img,#pj-right img{ margin-bottom: 50px; border: solid 1px #fff; } .section-title{ text-align: center; position: relative; margin: 120px 0 60px 0; } .section-title::before{ position: absolute; border: 1px solid; content: ""; top:50%; width: 30%; left: 0; } .section-title::after{ position: absolute; border: solid 1px; content: ""; top:50%; width: 30%; left: 69%; } .pj-name1,.pj-name2,.pj-name3,.pj-name4{ position: relative; } .name{ position: absolute; color: #fff; top: -50px; left: 10px; font-size: 12px; } /* 明るいHOUSEの特徴 */ #feature { color: #fff; margin-left: 300px; padding-bottom: 160px; background: rgba(0, 0, 0, 0.8); } #all-circle { display: flex; justify-content: space-between; text-align: center; } .circle-all { display: flex; flex-direction: column; align-items: center; /* 中央に配置 */ width: 30%; /* 幅の指定 */ } .circle-division { text-align: center; width: 100%; } .circle { width: 100%; /* 親要素の幅に合わせる */ height: 0; /* 高さを0に設定 */ padding: calc(50% - -0px) 0; border-radius: 50%; /* 円形にする */ border: 1px solid #fff; display: flex; /* フレックスボックスを使用 */ justify-content: center; /* 水平方向に中央揃え */ align-items: center; /* 垂直方向に中央揃え */ text-decoration: none; color: #fff; position: relative; /* 子要素の配置に必要 */ margin-bottom: 20px; /* 必要に応じて調整 */ } .circle:hover { background: #808080; box-shadow: 0px 0px 10px #666; color: #fff; transition: 0.5s; } .c-title { font-size: 16px; margin: 15px 0; } .c-p { font-size: 14px; } /* 家ができるまでの流れ */ /* フロー */ #flow{ background-color: #fff; margin-left: 300px; padding-bottom: 0; } #flow-p{ margin-bottom: 60px; } #process > li { width: 200px; height: 80px; line-height: 80px; background-color: #414141; color: #fff; font-size: 0.875rem; margin-bottom: 60px; position: relative; text-align: center; list-style: none; } #process > li:before{ content: ""; width: 0; height: 0; border-top: 30px solid #414141; border-right: 99px solid transparent; border-bottom: 24px solid transparent; border-left: 99px solid transparent; position: absolute; top: 80px; right: 1px; } #process{ position: relative; padding: 0; margin-right: 10%; } #process::before{ content: ""; width: 50px; height: 600px; background-color: #ffdd00; position: absolute; top: 0; left: 75px; } /* description */ #process-inner{ display: flex; justify-content: space-between; align-items: flex-start; } #description > dt> span{ display: block; height:40px; width:40px; border-radius:50%; text-align:center; background-color: #414141; position: absolute; top: 6px; left: -43px; line-height: 39px; color: #fff; } #description dt{ position: relative; border-bottom: solid 1px #414141; line-height: 2.2; font-size: 1.25rem; } #description{ line-height: 6; } #description dd{ line-height: 2.4; margin: 0 0 19px 0; } /* お問い合わせ */ #contact{ background-color: #fff; margin-left: 300px; padding-bottom: 160px; } #contact-inner{ display: flex; justify-content: space-between; } .border{ border: solid 1px #000000; width: 30%; padding: 50px 0; margin: 20px 0; position: relative; border-radius: 6px; text-align: center; } .c-1 img{ width: 64px; display: block; margin: 0 auto; } .border::before{ content: ""; width: 0; height: 0; border: 17px solid transparent; border-top: 17px solid #414141; transform:rotate(-45deg); position: absolute; right: -15px; bottom: -15px; } #contact-p{ margin-bottom: 60px; } .c-1{ font-size: 14px; text-decoration: none; color: black; } .border:hover{ border:solid 2px #414141; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); } /* フッター */ footer{ height: 200px; background-color: #121212; margin-left: 300px; padding-bottom: 0; color: #fff; } #ft-item{ display: flex; justify-content: space-around; list-style: none; } #ft-item li a{ font-size: 14px; text-decoration: none; color: #fff; margin: 0 40px 0 0; } #ft-item a{ position: relative; } #ft-item a::after{ position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #fff; bottom: -1px; /*アンダーラインがaタグの下端から現れる*/ transform: scaleX(0); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/ transform-origin: left center; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/ transition: transform 0.3s ease; /*変形の時間*/ } #ft-item a:hover::after{ transform: scaleX(1); /*ホバー後、x軸方向に1（相対値）伸長*/ } #cr{ text-align: center; font-size: 12px; margin-top: 60px; } @media screen and (max-width: 960px) { #project,#feature,#flow,#contact,footer { margin-left: 0; } #logo{ font-size: 16px; } .openbtn{ display: block; } #logo img{ width: 50px; } .nav-pc{ display: none; } header{ display: flex; width: 100%; height: 72px; background-color: #fff; } .video{ margin: 0; height: 200px; width: 100%; } .video video{ overflow: hidden; width: 100%; } /* 建築事例を紹介 */ #pj-all{ flex-direction: column; } #pj-left, #pj-right{ width: 100%; } .section-title{ font-size: 20px; margin: 60px 0 60px 0; } .section-title::before{ width: 16%; right: 77%; } .section-title::after{ width: 16%; left: 83%; } /* 明るいHOUSEの特徴 */ #feature{ padding-bottom: 150px; } .circle{ font-size: 14px; } .c-title { font-size: 16px; } .c-p { font-size: 12px; } #process-inner{ flex-direction: column; } /* 家ができるまでの流れ */ #description{ width: 100%; } #description dt{ left: 46px; width: 86%; } #description dd{ margin: 0 0 40px 48px; line-height: 1.9; } #description > dt >span{ height: 35px; width: 35px; left: -42px; line-height: 34px; } #process{ width: 100%; margin: 0; } #process > li { width: calc(100vw - 50px); } #process > li:before { left: 1px; top: 80px; right: 8px; bottom: 24px; border-right: calc(50vw - 25px)solid transparent; border-left: calc(50vw - 25px) solid transparent; border-top: 36px solid #414141; } #process::before { left: 0; margin: 0 auto; right: 0; } /* お問い合わせ */ #contact{ padding-bottom: 120px; } #contact-inner{ flex-direction: column; text-align: center; } .border{ width: 60%; padding: 50px 0; margin: 0 auto; margin-bottom: 20px; } /* フッター */ #ft-item{ flex-wrap: wrap; justify-content: space-around; padding: 0; line-height: 1.8; } #ft-item li a { white-space: nowrap; padding: 0 17px; } #cr{ margin: 60px 0 20px 0; } }

Lhankor_Mhy

2024/10/04 02:18

ご提示のコードで試して見ましたが、『右にズレる』問題が再現しませんでした。そちらのコードで再現できていない、画像や動画などに原因があるのかもしれません。