无法找到使我的页面宽度超过 100% 的多余边距

Question

我的一个页面上有一个部分将移动 viewprt 的宽度增加超过 100% 宽度。我无法找到它，也不确定它为什么这样做。当屏幕在移动视口中时，我的绿色框占据了屏幕的整个宽度，因此可以看到它。

有人知道为什么要应用额外边距吗？

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.project_arrow_box {
  position: relative;
  background-color: rgb(69, 186, 149);
  border: 4px solid rgb(69, 186, 149);
  width: 33%;
  height: 800px;
  z-index: 99;
}
.project_arrow_box:after,
.project_arrow_box:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.project_arrow_box:after {
  border-color: rgba(255, 0, 0, 0);
  border-left-color: rgb(69, 186, 149);
  border-width: 40px;
  margin-top: -40px;
}
.project_arrow_box:before {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: rgb(69, 186, 149);
  border-width: 26px;
  margin-top: -26px;
}
#project-content-wrap {
  margin: 30% 13%;
}
#project-box-title1 {
  font-size: 1.3em;
  color: #FFF;
}
#project-box-title2 {
  font-size: 10vmin;
  color: #FFF;
  margin-top: 20px;
}
#project-box-description {
  font-size: 1.3em;
  color: #303030;
  margin-top: 50px;
  line-height: 1.6em;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------------------------------------*/

@media screen and (max-width: 640px) {
  .project_arrow_box {
    width: 100%;
    height: 400px;
  }
  .project_arrow_box:after,
  .project_arrow_box:before {
    top: 100%;
    left: 50%;
  }
  .project_arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: rgb(69, 186, 149);
    border-width: 30px;
    margin-left: -30px;
  }
  .project_arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: rgb(69, 186, 149);
    border-width: 36px;
    margin-left: -36px;
    margin-top: 0;
  }
  #project-content-wrap {
    margin: 10% 5%;
  }
  #project-box-title1 {
    font-size: 1.1em;
    color: #FFF;
  }
  #project-box-description {
    font-size: 1.1em;
    color: #303030;
    margin-top: 40px;
    line-height: 1.6em;
  }
}

<div class="project_arrow_box">
  <div id="project-content-wrap">
    <div id="project-box-title1">KICK START YOUR</div>
    <div id="project-box-title2">PROJECT</div>
    <div id="project-box-description">We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.</div>
  </div>
</div>

Answer 1

在 640px 媒体查询中添加 box-sizing: border-box; 到 .project_arrow_box。它有一个 4px 的边框，与将其宽度设置为 100% 不兼容。您在 100% 的基础上增加了 8px。

当你使用 100% 作为块型元素的宽度时，它将占据其父元素宽度的 100%。但是，您随后为其分配了一个边框，该边框必须超出父级的宽度。

将border-sizing 设置为border-box 后，浏览器将“绘制”该元素的内边距、边距和边框，作为其宽度的减法。

扩展我的答案：您的其他页面有几个额外的问题，其核心是：

@media screen and (max-width: 640px)
    .input-borderless

这些输入都太大了，超出了页面主体。