Html Jumbotron和Footer没有延伸到手机屏幕设备的宽度

点击谷歌浏览器上的inspect。当我在“切换设备工具栏”选项上向下滚动页面时。我的Jumbotron和Footer没有延伸到手机的全屏宽度。我已将代码推送到CodePen.io上，供您查看。下面提供了链接。我还注意到，当检查html中的body标记时，它会准确地告诉我截止发生的位置

CodePen.io 
https://codepen.io/alexbritoofficial/pen/MWYpbRg

---

这是因为类

行

具有

左侧边距：-15px

和

右侧边距：-15px

正好位于类

w-100

下方，该类

宽度：100！重要

；我对以下两个实例进行了更改：

• 实例1：您可以删除

  行

  ，因为您没有使用

  列-**

  类
• Instance2：因为它下面有

  col-**

  类，所以在它周围添加一个

  容器流体

  ，这样

  行

  就不会超出屏幕视图

正文{
身高：100%；
背景色：#fccd4d；
}
myNavbar先生{
背景色：黑色；
}
琼伯伦先生{
背景图片：url（“/Project/img/Unknown.png”）；
高度：400px；
背景大小：100%100%；
边缘：继承；
}
/*导航栏列表项CSS*/
梅努特姆斯先生{
空白：nowrap；
}
.listItem{
左侧填充：30px；
右侧填充：30px；
}
.listItemText{
字体系列：“Calistoga”，草书；
颜色：白色；
空白：nowrap；
显示：内联块；
字号：18.2px；
}
.listItemText:悬停{
颜色：白色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：黑色；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
字体系列：“Calistoga”，草书；
}
.下拉列表内容a：悬停{
背景色：#bd3f055b；
}
.下拉：悬停.下拉内容{
显示：块；
}
.hr分离器{
边框颜色：黑色；
}
.1分部{
高度：10px；
}
.开胃菜1{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：粗体；
颜色：黑色；
}
.集装箱{
填充顶部：50px；
}
.主货柜{
填充顶部：10px；
}
/*菜单选项项样式*/
menuChoiceItem先生{
空白：nowrap；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：30px；
字体大小：粗体；
颜色：黑色；
}
.footer容器{
证明内容：之间的空间；
高度：300px；
背景色：黑色；
边缘：继承；
显示器：flex；
}
.海岸咖啡酒店1{
空白：nowrap；
字体系列：“Girasol”，草书；
颜色：白色；
}
.coastCafeFooterParagraph{
空白：nowrap；
字体系列：“Girasol”，草书；
颜色：白色；
}
.车牌识别码{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
颜色：黑色；
}
blockquote.menu-item-h1{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
颜色：黑色；
字体大小：粗体；
}
.开胃菜说明{
颜色：黑色；
}