html - 媒体查询没有采用应有的格式

Question

我正在我的网站上设计一个容器，出于某种原因，每当我的媒体查询发生时，我的代码都不会像它应该的那样。在我放置代码的每个地方它都可以工作(jsfddle，片段)，但在现场底部箭头进入蓝色容器内部。

为什么蓝色向下箭头出现在代码段中需要出现的位置，而不是我的网站？

请到这里:click here

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
  width: 100%;
  height: 400px;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 36px;
	margin-left: -36px;
}
#project-content-wrap {
  margin: 10% 5%;
}
#project-box-title1 {
  font-size: 1.1em;
  color: #FFF;
}
#project-box-title2 {
  font-size: 3.2em;
  color: #FFF;
  margin-top: 20px;
}
#project-box-description {
  font-size: 1.1em;
  color: #303030;
  margin-top: 40px;
  line-height: 1.6em;
}

<div class="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

在 discuss-project.css 的第 93 行，margin-top 设置为 -26px。删除它，它应该像你想要的那样。