Bootstrapを用いて、containerの端に要素を合わせる方法について

Question

HTML、CSS、Bootstrapを用いて、
以下のサイトの模写コーディングを行っています。
http://demo.themegraphy.com/write-ja/

Bootstrapのグリッドシステムを使って、
ヘッダー、メイン画像を.container一杯にまで広げたいです。

その為、ヘッダー、メイン画像を col-12 で横一杯になるように
コーディングしました。

しかし、col-12を指定しても、その中にブロック要素を入れると、
containerの端まで広がってくれません。

ディベロッパーツールを用いて、
空白の原因を探して見ても、見つけることができませんでした。

そもそも col　の中にブロック要素を作るとcontainerの端に合わせる事は出来ないのでしょうか？

ご回答よろしくお願い申し上げます。

containerと中身のブロック要素の間に空白が出来てしまっています。
https://gyazo.com/9f9d195ff0348c7b401eff7c11646c00

<div class="container"> <div class="row"> <div class="col-12"> <header> <img src="logo.png" width="10%"> <nav> <p>書くためのテーマ</p> <ul id="nav_list"> <li><a href="#">ホーム ✔︎</a></li> <li><a href="">ページ ✔︎</a></li> <li><a href="">タイポグラフィー</a></li> <li><a href="">お問い合わせ</a></li> </ul> <i class="fas fa-search"></i> </nav> </header> <main> <img src="cropped-nicole-honeywill-730102-unsplash.jpg" alt="" width="100%"> <p id="main-massage">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p> </div> </div>

Answer 1

bootstrap4でしょうか？

<div class="col-12"> のところを、 <div class="col-12 px-0"> とすると、カラムの左右のpaddingがゼロとなるため、container内の端までにカラムが広がると思います。 px-0などの記述方法については、bootstrapのspacingのページで解説されています。 [https://getbootstrap.com/docs/4.5/utilities/spacing/](https://getbootstrap.com/docs/4.5/utilities/spacing/)

また、<header></header>はbodyの上に記述するもので、このようにbody内では記述しない方が良いかと思います。

Comments

[findy]

すみません、誤って重複投稿してしまったので削除リクエストをしています

[chikasei427]

px-0を指定することで空白がなくなりました。
ありがとうございます！！

Answer 2

.colの内側に余白があるためではないかと思います。
.rowでmargin-left: -l5px;とmargin-right: -l5px;が指定されていますね..。

試しに以下を指定してみると、答えに近づくかもしれません。
(「.container」はmax-width: 1140px;が指定されていたりします)

/* 一時的に追加 */
.row {
  background: #f00;
}
.container {
  background: #ff0;
  height: 100vh;
}

Comments

[chikasei427]

解決致しました。
ご回答ありがとうございました！