子容器忽略父容器框和 RHS 边距上的边距

Question

上下文：尝试为我正在学习的在线课程构建响应式“菜单”。

问题：无法理解为什么子容器忽略父容器对浏览器窗口右侧的约束。

使用的代码，通过 JS Fiddle： https://jsfiddle.net/Kojrey/foh9tb1d/1/

在图像中描述解决方案：由于我不确定我的问题出在我的index.html或style.css文件中，所以我想尝试在附图中描述问题。 作为新手，我希望这些图片能让经验丰富的开发人员清楚地了解问题和解决方案。见附件。但如果没有，请参阅上面的 JS Fiddle。

窗口约为 75%（中等媒体类型），其中较大的第三个框出现问题 窗口约为 40%（小媒体类型），其中所有 3 个盒子都存在问题

Answer 1

我找到的解决方案确实很简单:-D

可以通过添加填充来解决问题：

.parent-container {
    width: 100%;
    padding-right: 40px;
  }

不确定这是否是所有其他解决方案的完美解决方案，但对于短期来说是一个可靠的解决方法。