Margin/padding hover with pseudo element issue

Question

I created four boxes, and when one of the boxes are clicked or selected an hovered on, it creates extra padding or margin that overlaps the other boxes.

I have tried doing:

.marketing-service.active {
   margin: 0;
}

and

.marketing-service.active:hover {
   margin: 0;
}

But both were failed attempts. When viewing the snippet or Jsfddle be sure at least one box is on the second row and click on the first box, then hover over it.

What can I do to get the all of the boxes to stay in their original location, but remove the extra spacing the down arrow is causing?

$('#marketing-tab1').addClass('active');
	$('#marketing1').show();
  
  $('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
	});

#marketing-services {
  width: 80%;
  margin: 0 10%;
}

.marketing-service {
  display: inline-block;
  width: 22%;
  margin: 0 2%;
  height: 400px;
  background: #F0F0F0;
  position: relative;
  cursor: pointer;
}

.marketing-service:first-child {
  margin-left: 0;
}

.marketing-service:last-child {
  margin-right: 0;
}

.marketing-service:hover {
  background: rgba(0, 255, 170, .4);
  z-index: 1;
}

.marketing-service-wrap {
  padding: 10%;
  width: 80%;
}

.marketing-service-title {
  font-size: 1.6em;
  margin-bottom: 100px;
}

.marketing-img {
  width: 125px;
  height: 125px;
}


/*-- Down Arrow for boxes --*/

.marketing-service.active,
#marketing-tab1.active {
  background: rgba(0, 255, 170, .4);
}

.marketing-service.active:after,
.marketing-service.active:before,
#marketing-tab1.active:after,
#marketing-tab1.active:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.marketing-service.active:after,
#marketing-tab1.active:after {
  border-width: 0px;
  margin-left: 0px;
  border-color: rgba(0, 255, 170, .4);
  border-right-color: rgba(0, 255, 170, .4);
  margin-top: -30px;
}

.marketing-service.active:before,
#marketing-tab1.active:before {
  border-color: #FFF;
  border-top-color: rgba(0, 255, 170, .4);
  border-width: 36px;
  margin-left: -36px;
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
  <div class="marketing-service" id="marketing-tab1">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">A</h2>
      <img src="../images/marketing-seo.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab2">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">B</h2>
      <img src="../images/marketing-ppc.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab3">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">C</h2>
      <img src="../images/marketing-conversion.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab4">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">D</h2>
      <img src="../images/marketing-email.png" class="marketing-img">
    </div>
  </div>
</div>

Answer 1

Remove border-color:fff. edit this in your css:

.marketing-service.active:before,
#marketing-tab1.active:before {
  border-color: transparent;
  border-top-color: rgba(0, 255, 170, .4);
  border-width: 36px;
  margin-left: -36px;
  margin-top: 0;
}

Here's the working snippet:

$('#marketing-tab1').addClass('active');
	$('#marketing1').show();
  
  $('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
	});

#marketing-services {
  width: 80%;
  margin: 0 10%;
}

.marketing-service {
  display: inline-block;
  width: 22%;
  margin: 0 2%;
  height: 400px;
  background: #F0F0F0;
  position: relative;
  cursor: pointer;
}

.marketing-service:first-child {
  margin-left: 0;
}

.marketing-service:last-child {
  margin-right: 0;
}

.marketing-service:hover {
  background: rgba(0, 255, 170, .4);
  z-index: 1;
}

.marketing-service-wrap {
  padding: 10%;
  width: 80%;
}

.marketing-service-title {
  font-size: 1.6em;
  margin-bottom: 100px;
}

.marketing-img {
  width: 125px;
  height: 125px;
}


/*-- Down Arrow for boxes --*/

.marketing-service.active,
#marketing-tab1.active {
  background: rgba(0, 255, 170, .4);
}

.marketing-service.active:after,
.marketing-service.active:before,
#marketing-tab1.active:after,
#marketing-tab1.active:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.marketing-service.active:after,
#marketing-tab1.active:after {
  border-width: 0px;
  margin-left: 0px;
  border-color: rgba(0, 255, 170, .4);
  border-right-color: rgba(0, 255, 170, .4);
  margin-top: -30px;
}

.marketing-service.active:before,
#marketing-tab1.active:before {
  border-color: transparent;
  border-top-color: rgba(0, 255, 170, .4);
  border-width: 36px;
  margin-left: -36px;
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
  <div class="marketing-service" id="marketing-tab1">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">A</h2>
      <img src="../images/marketing-seo.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab2">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">B</h2>
      <img src="../images/marketing-ppc.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab3">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">C</h2>
      <img src="../images/marketing-conversion.png" class="marketing-img">
    </div>
  </div>
  <div class="marketing-service" id="marketing-tab4">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">D</h2>
      <img src="../images/marketing-email.png" class="marketing-img">
    </div>
  </div>
</div>