質問: HTML、CSS、Bootstrapを用いて、 以下のサイトの模写コーディングを行っています。 http://demo.themegraphy.com/write-ja/ Bootstrapのグリッドシステムを使って、 ヘッダー、メイン画像を.container一杯にまで広げたいです。 その為、ヘッダー、メイン画像を col-12 で横一杯になるように コーディングしました。 しかし、col-12を指定しても、その中にブロック要素を入れると、 containerの端まで広がってくれません。 ディベロッパーツールを用いて、 空白の原因を探して見ても、見つけることができませんでした。 そもそも col の中にブロック要素を作るとcontainerの端に合わせる事は出来ないのでしょうか? ご回答よろしくお願い申し上げます。 containerと中身のブロック要素の間に空白が出来てしまっています。 https://gyazo.com/9f9d195ff0348c7b401eff7c11646c00 ` 書くためのテーマ ホーム ✔︎ ページ ✔︎ タイポグラフィー お問い合わせ Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。 `
回答: bootstrap4でしょうか? のところを、 とすると、カラムの左右のpaddingがゼロとなるため、container内の端までにカラムが広がると思います。 px-0などの記述方法については、bootstrapのspacingのページで解説されています。 また、はbodyの上に記述するもので、このようにbody内では記述しない方が良いかと思います。