メインのimg要素が画面幅に合わせられない【模写コーディング】

前提・実現したいこと

1枚目のお手本の画像（①）のように、メインの画面を横幅いっぱいに広げて余白が入らないようにしたいのですが、どんなコーディングをしても2枚目の画像（②）のように横幅に余白が入ってしまいます。最終的にはこの余白を無くして、画面幅にピッタリ合うようにメインの画像を配置したいです。

また、私はWindows10を使用しているのですが、パソコンの機種によっては同じ指定をしていても動作に違いが出るということはあるのでしょうか。

初心者でわからないことだらけなので、出来るだけ丁寧にご教示いただけると幸いです。

①
ー－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ー－－－－－－－－
②

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>My Work</title>
9</head>
10<body>
11    <header id="header">
12        <h1><a href="index.html">My Work</a></h1>
13        <ul class="nav">
14            <li><a href="#about">About</a></li>
15            <li><a href="#works">Works</a></li>
16            <li><a href="#news">News</a></li>
17            <li><a href="#contact">Contact</a></li>
18            <li><a href="https://www.instagram.com/"><img src="images/icon-instagram.png" alt="Instagram"></a></li>
19        </ul>
20    </header>
21
22    <main id="main">
23        <div class="mainvisual">
24            <img src="images/mainvisual-pc.jpg" alt="メインの画像">
25        </div>
26
27        <section id="about" class="wrapper">
28            <h2>About</h2>
29            <div class="about-text">
30                <p>Xxxxx Ashley</p>
31                <p>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan<br/>
32                tel: 000-0000-0000<br/>
33                url: www.xxxxxx.jp<br/>
34                mail: xxx@xxxxxx.jp</p>
35                <p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
36            </div>
37        </section>
38
39        <section id="works" class="wrapper">
40            <h2>Works</h2>
41            <ul class="images">
42                <li><img src="images/works1.jpg" alt="縦線"></li>
43                <li><img src="images/works2.jpg" alt="白"></li>
44                <li><img src="images/works3.jpg" alt="黒"></li>
45                <li><img src="images/works4.jpg" alt="窓"></li>
46                <li><img src="images/works5.jpg" alt="曲線"></li>
47                <li><img src="images/works6.jpg" alt="ビル"></li>
48            </ul>
49        </section>
50
51        <section id="news" class="wrapper">
52            <h2>News</h2>
53            <div class="news">
54                <dl>
55                    <dt><time>2020.XX.XX</time></dt>
56                    <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
57                    <dt><time>2020.XX.XX</time></dt>
58                    <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
59                    <dt><time>2019.XX.XX</time></dt>
60                    <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
61                    <dt><time>2019.XX.XX</time></dt>
62                    <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
63                    <dt><time>2019.XX.XX</time></dt>
64                    <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
65                </dl>
66            </div>
67        </section>
68
69        <section id="contact" class="wrapper">
70            <h2>Contact</h2>
71            <form action="#" method="post">
72                <dl>
73                    <dt><label for="name">NAME</label></dt>
74                    <dd><input type="text" id="name" name="your-name"></dd>
75                    <dt><label for="E-mail">E-MAIL</label></dt>
76                    <dd><input type="text" id="email" name="your-email"></dd>
77                    <dt><label for="message">MESSAGE</label></dt>
78                    <dd><textarea name="your-message" id="message"></textarea></dd>
79                </dl>
80                <div class="button"><input type="submit" value="送信"></div>
81            </form>
82        </section>
83    </main>
84
85    <footer id="footer" class="wrapper">
86        <small>© 2020 My Work</small>
87    </footer>
88</body>
89</html>
90

⇩CSSはこんな感じです。

CSS
1/*
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com
6Twitter: @rich_clark
7*/
8
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure,
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29
30body {
31    line-height:1;
32}
33
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section {
36    display:block;
37}
38
39nav ul {
40    list-style:none;
41}
42
43blockquote, q {
44    quotes:none;
45}
46
47blockquote:before, blockquote:after,
48q:before, q:after {
49    content:'';
50    content:none;
51}
52
53a {
54    margin:0;
55    padding:0;
56    font-size:100%;
57    vertical-align:baseline;
58    background:transparent;
59}
60
61/* change colours to suit your needs */
62ins {
63    background-color:#ff9;
64    color:#000;
65    text-decoration:none;
66}
67
68/* change colours to suit your needs */
69mark {
70    background-color:#ff9;
71    color:#000;
72    font-style:italic;
73    font-weight:bold;
74}
75
76del {
77    text-decoration: line-through;
78}
79
80abbr[title], dfn[title] {
81    border-bottom:1px dotted;
82    cursor:help;
83}
84
85table {
86    border-collapse:collapse;
87    border-spacing:0;
88}
89
90/* change border colour to suit your needs */
91hr {
92    display:block;
93    height:1px;
94    border:0;  
95    border-top:1px solid #cccccc;
96    margin:1em 0;
97    padding:0;
98}
99input, select {
100    vertical-align:middle;
101}
102/* リセットCSS終了 */
103
104body {
105    color: #24292e;
106}
107li {
108    list-style: none;
109}
110h2 {
111    font-size: 24px;
112    margin-bottom: 75px;
113}
114section {
115    margin: 0 auto;
116    text-align: center;
117    max-width: 855px;
118}
119#header {
120    margin: 0 auto;
121    max-width: 855px;
122    height: 270px;
123    align-items: center;    /* 縦方向の真ん中にそろえる？ */
124    display: flex;
125    justify-content: space-between;
126}
127#header h1 {
128    font-size: 30px;
129}
130#header a{
131    color: #24292e;
132    text-decoration: none;
133}
134#header li {
135    padding: 0 15px;
136    display: inline-block;
137}
138#header li:hover {
139    opacity: 0.7;
140}
141#header img {
142    width: 20px;
143    height: 20px;
144    vertical-align: middle;
145}
146#main {
147    max-width: 1350px;
148    margin: 0 auto;
149    text-align: center;
150    width: 100%;
151}
152#main h2 {
153    margin-top: 95px;
154}
155#main .mainvisual img{
156    width: 100%;
157    height: 420px;
158    object-fit: cover;
159}
160#main .about-text {
161    text-align: left;
162}
163#main .about-text p {
164    font-size: 14.4px;
165    padding-bottom: 35px;
166}
167#main .about-text p:nth-child(2){    /* 特定の要素に指示を与えられる */
168    line-height: 25px;
169}
170#main .about-text p:last-child{
171    line-height: 23px;
172}
173#main .images {
174    display: grid;
175    grid-template-columns: 1fr 1fr 1fr;
176    gap: 35px;
177    margin-bottom: 165px;
178}
179#main .images li img{
180    height: 170px;
181}
182
183.news {
184    max-width: 960px;
185    margin: 0 auto 130px auto;
186    font-size: 0.9rem;
187    padding: 0 4%;
188}
189.news dl {
190    display: flex;
191    flex-wrap: wrap;
192    border-top: 2px solid #cccccc;
193    margin-bottom: 20px;
194}
195dt {
196    display: block;
197}
198dd {
199    display: block;
200}
201#main .news dt {
202    width: 20%;
203    border-bottom: solid 1px#c8c8c8;
204    padding: 15px;
205}
206#main .news dd {
207    width: 80%;
208    border-bottom: solid 1px#c8c8c8;
209    padding: 15px;
210}
211#main .news dd:last-child {
212    border-bottom: 2px solid #cccccc;
213}
214#contact dl{
215    display: flex;
216    flex-wrap: wrap;
217}
218#contact dt {
219    width: 15%;
220}
221#contact dd {
222    width: 85%;
223    margin-bottom: 10px;
224}
225#contact input,
226#contact textarea{
227    width: 100%;
228    border: 1px solid #c8c8c8;
229    padding: 10px;
230}
231#contact textarea {
232    height: 10rem;
233}
234#contact .button {
235    margin: 0 auto;
236    width: 200px;
237    margin-top: 20px;
238}
239#contact .button input {
240    color: #fff;
241    background-color: #202529;
242}
243#contact .button input:hover {
244    color: #000;
245    background-color: #fff;
246    border: 1px solid #000;
247}
248#footer {
249    margin-top: 130px;
250    font-size: 10px;
251    text-align: center;
252    height: 40px;
253    line-height: 40px;
254    background-color: #202529;
255    color: #fff;
256}
257

試したこと

img要素が入っている親要素の横幅を指定して、img要素自身にはwidth: 100％;を指定すれば良いと思っていたのですが、それをやってみてもできませんでした。

補足情報（FW/ツールのバージョンなど）

使っているパソコン：Windows10
使っているテキストエディタ：VS code

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

回答1件

ベストアンサー

ブラウザのデフォルトの余白がありますので、それをリセットすればどうでしょう。

css
1* {
2  margin: 0;
3  padding: 0;
4}

リセットCSSの導入も検討されるいいかと思います。

追記

コメントより

追加のコードを見ました。

#main に
max-width: 1350px;
margin: 0 auto;
を設定してますので、画面幅が1350px以上になると左右に余白は出てきます。
画面幅が1350px以下なら左右の余白は出ません。

ご希望のことは、画面幅が1350px以上でもメイン画像を#mainの幅をはみ出させて画面幅一杯に表示させたいということでしょうか。

はい、その通りです。

下記のように絶対配置すればどうでしょう。

css
1#main .mainvisual img{
2  width: 100%;
3  height: 420px;
4  object-fit: cover;
5  position: absolute; /* 追加 */
6  left: 0;            /* 追加 */
7}
8/* 以下追加 */
9#main .mainvisual {
10  height: 420px;
11}

投稿2021/11/21 05:06

編集2021/11/21 11:45

hatena19

総合スコア33790

puta

2021/11/21 05:14

ご回答ありがとうございます。リセットCSSについてのご指摘ですが、私はdoctor CSSというリセットCSSを既に導入しています。ご教示いただいたCSSの内容もこのdoctor CSSに記述されていることから、他の要因が考えられると思うのですが、何か他に思い当たる問題点はございますでしょうか。

hatena19

2021/11/21 05:24

提示のHTMLにはリセットCSSの設定はないですね。実際は導入しているのなら、提示のHTML, CSSでは症状を再現できません。提示以外の部分に問題があるのでしょう。

puta

2021/11/21 05:47

提示したソースコードの中で問題があるのだと考えておりましたが、他の部分に問題があるのですね。質問を編集して全てのソースコードを掲載させていただいたので、お時間がございましたら再びご覧いただけると幸いです。

hatena19

2021/11/21 07:24 編集

追加のコードを見ました。 #main に max-width: 1350px; margin: 0 auto; を設定してますので、画面幅が1350px以上になると左右に余白は出てきます。画面幅が1350px以下なら左右の余白は出ません。ご希望のことは、画面幅が1350px以上でもメイン画像を#mainの幅をはみ出させて画面幅一杯に表示させたいということでしょうか。

puta

2021/11/21 09:41

はい、その通りです。

hatena19

2021/11/21 11:45

回答に追記しましたので、ご参照ください。

puta

2021/11/21 13:19

上手く表示できました。絶対配置にするという考えは全くなかったので非常に勉強になります。この問題に1週間ほど悩んでいたので、問題が解決してスッキリしております。また、お忙しい中ソースコードまで読んでいただき、誠にありがとうございました。ベストアンサーにさせていただきます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！