无法找到多余的保证金，使我的网页宽度超过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

这些输入太大并且超出了页面正文。