Media Query not taking format like it should

Question

I am designing a container on my site and for some reason, whenever my media query takes place, my code does not turn out like it should. Every where I put my code it works (jsfddle, snippet), but on site the bottom arrow is going inside of the blue container.

Why is the blue down arrow where it needs to be in the snippet, but not my website?

Please go here: 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

At line 93 of discuss-project.css the margin-top is set to -26px. Remove that and it should be like you want.