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

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 的第 93 行。css 将 margin-top 设置为 -26px。删除它，它应该像你想要的那样。

Answer 2

在 media-queries 部分，只需在 .arrow_box:before.

上添加一个 0px left margin

.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
    margin-top: 0px;
}

问题很简单：当 screen-size>640px 时，它会保留箭头的初始 margin-left:-36px。在 Chrome、Firefox、IE 和 Safari

下测试

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

Media Query not taking format like it should

html

css

media-queries

responsive-design