メイン画像の左に設定していないはずの余白がついてしまう

Question

コーディングの練習をしています。
どう検証してみても分からないので教えてください...(>_<)

ブラウザ全画面100％の表示にすると、メイン画像の左側に余白がついてしまうのはなぜなのでしょう？

＊リセットCSSはhtml5 doctorを使用しています。

<div class="container">
   <header class="wrapper">
   </header>

        <div class="mainimage">
            <img src="img/austin-distel-rxpThOwuVgE-unsplash.jpg" alt="メイン画像">
            <div class="inner">
                <h2>Customer Obsessed</h2>
                <p>      
                テキストが入ります　テキストが入ります　テキストが入ります　テキストが入ります
                テキストが入ります　テキストが入ります　テキストが入ります　テキストが入ります
                テキストが入ります　テキストが入ります　テキストが入ります　テキストが入ります
                テキストが入ります　テキストが入ります　テキストが入ります　テキストが入ります
                </p>
            </div>
        </div>

   <div class="contents wrapper">
   </div>

</div>

html{
    font-size: 62.5%;
}

body{
    font-family: Hiragino Kaku Gothic ProN;
    color: #707070;
    background-color:#ccc;
    box-sizing: border-box;
    list-style: none;
}

.container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.wrapper{
    margin-left: 40px;
    margin-right: 40px;
}

/* ---------------------------------
 mainimage
---------------------------------- */
.mainimage{
    height: 620px;
}
.mainimage img{
    width: 100%;
    min-width: 1400px;
    height: auto;
    position: absolute;
}
.mainimage .inner{
    width: 650px;
    position: relative;
    top: 175px;
    left: 400px;
}
.mainimage h2{
    color: #FFF;
    font-size: 6.7rem;
    font-weight: normal;
    margin-bottom: 22px;
}
.mainimage p{
    color: #FFF;
    font-size: 2.1rem;
    width: 675px;
    line-height: 180%;
}

Answer 1

.mainimage img{
    width: 100%;
    min-width: 1400px;
    height: auto;
    position: absolute;
}

ここで、img要素の位置の指定がされていないために、思っているような位置に配置できていないのだと思います。
（位置はleft, right, top, bottomというプロパティで指定します。）
（※これらが指定されていないときにどのようにこの要素の位置が決まるのかについて、詳しい説明は他の方に譲らせていただきます）

.mainimage img{
    width: 100%;
    min-width: 1400px;
    height: auto;
    position: absolute;
    left: 0; /* 画面の左端から0だけ右に移動したところ、つまり画面の左端 */
}

このように、要素の位置を画面の左端に指定することで、意図された表示になるのではないでしょうか？？

Comments

[kumazou]

できましたー！！
嬉しいです！ありがとうございます。
positionを使用するときには親要素にも位置指定が必要なのですね？勉強になります！

[hallen0225]

出来たようでよかったです！
position: absoluteのときは、位置指定もセットだと思っていただいた方が良いかと思います。（このままだと位置がはっきり決まらないので）

[kumazou]

セットなんですね。positionまだまだ理解できていなかったようです。
ありがとうございます！！＾＾