HTML/CSS 画面いっぱいに表示させたい

Question

HTML/CSSを独学で学んでいる者です。

現在下記、画像の位置接待にてこづっています。
fotter直前に表示させたい画像なんですが、横幅いっぱいに表示されず、右側寄りで表示されてしまいます。
margin等も記載していないので、なぜこのように表示されていますのか見当すらつきません。

<section class="section_wrapper">
            <div class="container_justcontinue">
                <h2 class="justcontinue_title">Just Continue</h2>
                <p class="justcontinue_text">
                    日々、学び続ける<br>
                    いつか、Webで世界を今より少しだけ<br>
                    よくするために<br>
                    でも、今は自分のために<br>
                    毎日少しずつ勉強する<br>
                    そんな私と共に学んでくれる方を募集しています
                </p>
                <form class="btn">
                    <input type="submit" value="お問い合わせしてみる">
                </form>
            </div>
        </section>

div.container_justcontinue {
  width: 1366px;
  height: 455px;
  background-image: url("images/tim-bogdanov-4uojMEdcwI8-unsplash.png");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

h2.justcontinue_title {
  color: white;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 46px;
  text-align: center;

}

p.justcontinue_text {
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center; 

}

.btn {
  width: 210px;
  height: 54px;
  border-radius: 5px;
  background-color: #83032A;
  color: white;
  line-height: 54px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 48px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

お助けいただけると嬉しいです！

Answer 1

なぜこのように表示されていますのか見当すらつきません。

何が問題を起こしているかは「検証ツール（firefoxではインスペクター）」で確認できます。

周辺の全てのタグについてmargin、border、paddingなどがどう作用しているか、その設定はどこに起因しているかをまずはチェックすることです。

• 【知らない人のための】検証ツールってこんなに便利！【Google Chrome】 - Qiita
• インスペクター - 開発ツール | MDN

Comments

[missy]

ご回答ありがとうございます。
検証ツールでは確認済みなんですが、それでもなぜなのか分からなかったためここに質問をさせていただいたんです。。。
fvでは問題なく画面いっぱいに表示されていて、同じ記述にしても、なぜかこの部分だけが反映しないのです。

[KojiDoi]

fvとは？

[missy]

すみません、ファーストビューの事でございます。

Answer 2

こんにちは。

前後のHTMLがないので、何が影響しているのか、はっきりとはわからないのですが、

div.container_justcontinue {
  width: 1366px;

こちらの幅指定を削除すると、どうなりますでしょうか。

Answer 3

画像はCSSで指定していますか？CSSの場合、
background-size: cover; としてみてはいかがでしょうか。

Comments

[missy]

CSS追加させていただきました。
background-size: cover;　はすでに記載しているんですよね。。。

[kaitoo]

CSSの div.container_justcontinue { を　.container_justcontinueとしてみても変わらないでしょうか。

Answer 4

どの要素の画像か？サイズなど諸々分からないので何ともですが、
display 要素を確認してみては？

Comments

[missy]

回答ありがとうございます。CSS追加

で載せました。
display: flex; を使っているんですが、display: block; などでも試してみましたが、表示は画像の通り一向に変わりませんでした。