如何将此div的宽度设置为屏幕范围？

Question

我正在尝试使.container（带黄色边框的div）占据其父（体）的全宽，即屏幕宽度，我不知道是什么让它变窄并且像那样居中

.container {
background: url("https://image.ibb.co/e7L09w/rsz_pexels_photo_540518.png") no-repeat fixed center bottom;
background-size: cover;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 120px 1fr 150px;
border: 2px solid yellow;
width: 100%;
height: 100%;

见下面的笔：

https://codepen.io/mrassili/pen/wPxpgL

Answer 1

正如@Temani Afif所说，你正在使用Bootstrap，因此类.container将给div一个最大宽度。 请使用班级container-fluid，它没有最大宽度，因此宽度将是屏幕大小。