iphoneサイズのレスポンシブデザインでレイアウトがずれてしまう

下記、問題点2点を改善させたいです。

iphoneサイズのレスポンシブデザインを行う際、画面の右側にできてしまっている空きをなくしたい。
クラス名"sentence-content"内のpタグのズレをなくしたい。

試みた作業　：　問題点１に関しては、スマホ画面用のcontainer幅widthを100%にしたり、margin: 0 auto;の指定を加えたりしてみましたが、うまくいきませんでした。
問題点２に関しては、flexboxの指定プロパティを変更してみましたが、思うようなレイアウトにならずうまくいきませんでした。

※パソコン幅とタブレットサイズのレスポンシブの際は上記のようなズレなどは表示されませんでした。
スマホ用レスポンシブの指示は、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>●○○○○</title>
7        <link rel="stylesheet" href="about.css">
8        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9    </head>
10    <body>
11        <header>
12            <div class="container">
13                <div class="wrapper">
14                    <div class="header-left">
15                        <img class="header-logo" src="●○○○○●○○○○●○○○○">
16                    </div>
17                    <span class="fa fa-bars menu-icon" style="font-size:100px"></span>
18                    <nav>
19                        <a href="●○○○○">●○○○○</a>
20                        <a href="●○○○○">●○○○○</a>
21                    </nav>
22                </div>
23            </div>
24        </header>
25        <section class="about-wrapper">
26            <div class="container">
27                <div class="heading">
28                    <h1>●○○○○</h1>
29                </div>
30                <div class="about-content">
31                    <a><img class="about-img" src="●○○○○"></a>
32                    <div class="sentence">
33                        <h2>●○○○○●○○○○</h2><p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○<br>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○<br>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○<br><br></p>
34                        <div class="sentence-content">
35                            <div class="bold">
36                                <p>●○○○○</p>
37                                <p>●○○○○</p>
38                                <p>●○○○○</p>
39                            </div>
40                            <div class="normal">
41                                <p>●○○○○</p><br>
42                                <p>●○○○○</p><br>
43                                <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p><br>
44                            </div>
45                        </div>
46                    </div>
47                </div>
48            </div>
49        </section>
50        <footer>
51            <div class="container">
52                <div class="wrapper-bottom">
53                    <div class="footer-center">
54                        <img class="header-logo" src="●○○○○">
55                    </div>
56                </div>
57            </div>
58        </footer>
59    </body>
60</html>

CSS
1* {
2  box-sizing: border-box;
3}
4body {
5    margin: 0;
6    font-family: "Hiragino Mincho ProN";
7}
8a {
9    text-decoration: none;
10}
11.container {
12    width: 1170px;
13    margin: 0 auto;
14}
15.wrapper {
16    height: 190px;
17    width: 100%;
18    display: flex;
19    justify-content: space-between;
20}
21.header-left {
22    display: flex;
23    justify-content: flex-start;
24}
25.header-logo {
26    width: 110px;
27    padding: 40px 0;
28}
29.header-logo:hover {
30    cursor: default;
31}
32.menu-icon {
33  width: 40px;
34  color: black;
35  font-size: 70px ;
36  padding: 45px 90px 0 45px;
37  display: none  !important;
38}
39nav {
40    display: flex;
41    justify-content: flex-end;
42    padding-top: 128px;
43}
44nav a {
45    color: black;
46    font-size: 18px;
47    font-weight: bold;
48    letter-spacing: 5px;
49    padding-left: 100px;
50}
51nav a:hover {
52    cursor: pointer;
53}
54.about-wrapper {
55    padding-top: 160px;
56}
57.heading {
58    text-align: center;
59    padding-bottom: 80px;
60}
61.heading h1 {
62    font-size: 18px;
63    letter-spacing: 5px;
64    padding: 6px 50px;
65    color: white;
66    background-color: black;
67    display: inline-block;
68    font-weight: bold;
69    border-radius: 7px;
70}
71.about-content {
72    padding-bottom: 160px;
73    display: flex;
74    justify-content: space-between;
75}
76.about-img {
77    width: 535px;
78    object-fit: cover;
79    height: 450px;
80    border: 1px solid #CCCCCC;
81}
82.sentence {
83    width: 535px;
84}
85.about-img:hover {
86    cursor: pointer;
87}
88.about-content h2 {
89    font-size: 18px;
90    font-weight: bold;
91    letter-spacing: 5px;
92    text-align: left;
93}
94.about-content p {
95    letter-spacing: 5px;
96    margin: 10px 0;
97    font-size: 14px;
98    font-weight: normal;
99    line-height: 2;
100    text-align: justify;
101    display: inline-block;
102}
103.sentence-content {
104    display: flex;
105    justify-content: space-between;
106}
107.bold p {
108    font-weight: bold;
109}
110footer {
111    height: 100px;
112    background-color: black;
113    width: 100%;
114}
115.footer-center {
116    text-align: center;
117}
118.footer-center img {
119    width: 60px;
120    padding: 22px 0 8px 0;
121}
122
123/*スマホ*/
124@media(max-width:670px) {
125    nav {
126        display: none; 
127    }
128    .menu-icon {
129        display: block  !important;
130    }
131}

Jon_do

2020/08/26 03:14

現行のコードを貼り付けて試してみましたが、状況の再現が出来ませんでした。状況の再現が出来ているコードに修正することをお勧めします。

user20

2020/08/26 04:05

改めてコードを添付し直しました。画像や文章はダミーを入れてありますが、改行や文章の文字数などは合わせました。よろしくお願いいたします。

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

回答1件

ベストアンサー

問題点1の解決方法

クラス.containerと.sentenceのwidthが固定値になっているので100%に変更します。

css
1@media(max-width:670px) {
2  .container {
3    width: 100%;
4  }
5  .sentence {
6    width: 100%;
7  }
8}

###問題点2の解決方法
flexの配置方向が行(row)になっているので列(column)に変更します。

css
1@media(max-width:670px) {
2  .about-content {
3    flex-direction: column;
4  }
5  .about-img {
6    width: 100%;
7    height: auto;
8  }
9  .sentence-content {
10    flex-direction: column;
11  }
12}