Problemas com diferentes dispositivos

[mruoppolo 14]

Olá, tudo bem?

Estou tendo um problema com o meu site: https://goo.gl/EDUSZT ele tem um efeito de flip card nas páginas que mostram os cursos, que quando o flip card virava ele simplesmente fica totalmente fora da box, ai eu comecei a arrumar um por um com margin-top: - um numero; até centralizar certinho

Isso funcionou legal, porém como tem vários pcs aqui na empresa eu descobri que nos macs fica de um jeito, nos pc de outro, nos notebooks de outro, nos celulares de outro.

Existe alguma forma de configurar para que todos fiquem iguais???

O meu código é este aqui:

HTML

<div class="et_pb_code et_pb_module  et_pb_code_0">
	<div class="front">
		<div class="image_header"> 
			<img src="https://448kw6kd91m2hm0u317ergp9-wpengine.netdna-ssl.com/wp-content/uploads/2016/09/fb_ad-1.svg" alt=""> 
		</div> 
		<div class="frontTitle">
			<h3 style="text-align:center;">Facebook Ads: Crie os Melhores Anúncios para Gerar Conversões no seu Site</h3>
		</div> 
		<p style="text-align:center;">Conquiste novos clientes e aumente suas vendas com os Anúncios de Facebook.</p> 
		<div style="margin:0 auto;margin-top:-10px;text-align:center;">
			<div class="positionButton">
				<button class="btnSaibaMais" id="saibaMais">Saiba Mais</button>
			</div>
		</div>
	</div><!--–front–--> 

	<div class="back"> 
		<div class="aboutCourseTop"> 
			<div class="aulas"> 
				<h1>27</h1> 
				<span class="textDefinition">aulas</span> 
			</div> 
			<div class="horas"> 
				<h1>3.5</h1> 
				<span class="textDefinition">horas</span> 
			</div> 
			<div class="descriptionDiv"> 
				<p class="textDescription">Aumente suas vendas colocando sua empresa nas primeiras colocações dos mecanismos de busca com estratégias de SEO.</p> 
			</div><br><br> 
			<div class="aboutList"> 
				<ul> 
					<li>Some key point of this course</li> 
					<li>Some key point of this course</li> 
					<li>Some key point of this course</li> 
				</ul> 
			</div><!--– aboutList–--> 
			<div style="margin:0 auto;margin-top:-10px;text-align:center;"> 
				<div class="positionButton">
					<button class="btnSaibaMais" id="saibaMais">Comprar Curso</button>
				</div> 
			</div> 
		</div> 
	</div><!--– back –-->
</div> <!-- .et_pb_code -->

CSS

.et_pb_code_0 {
    position: relative;
    display: block;
    transform-style: preserve-3d;
}

.et_pb_code_0 .front, .et_pb_code_0 .back {
    text-align: center;
}

.et_pb_code_0 .front {
    height: inherit;
    top: 0;
    z-index: 99;
    text-align: center;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transition: all .55s ease-in-out;
    -moz-transition: all .55s ease-in-out;
    -ms-transition: all .55s ease-in-out;
    -o-transition: all .55s ease-in-out;
    transition: all .55s ease-in-out;
}

.et_pb_code_0 .back {
    margin-top: -532px !important;
    top: 0;
    z-index: 1000;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transition: all .55s ease-in-out;
    -moz-transition: all .55s ease-in-out;
    -ms-transition: all .55s ease-in-out;
    -o-transition: all .55s ease-in-out;
    transition: all .55s ease-in-out;
}

.et_pb_code_0.flip .front {
    z-index: 99;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.et_pb_code_0.flip .back {
    z-index: 100;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

button.btnSaibaMais {
    display: inline-block;
    margin: 8% auto 0;
    padding: .5em 1.2em;
    cursor: pointer;
    font-size: 16px;
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #348ef0;
    text-align: center;
    color: #348ef0;
}
button.btnSaibaMais:hover {
  background-color: #348ef0;
  color: #FFF;
}
.image_header {
  background-color: #ff8735;
  text-align: center;
  margin-top: -30px !important;
  ;
  margin-right: -30px !important;
  padding-top: 30px;
}

.aboutCourseTop{
  border-top: 10px solid #ff9473;
  margin-top: -30px !important;
  ;
  margin-right: -30px !important;
}
.aulas{
  margin-top: 20px;
  width: 50%;
  float: left;
  border-right: 1px solid #d7d7d7; 
  text-align: center;
}

.horas{
  margin-top: 20px;
  width: 50%;
  float: left;
  text-align: center;
}
.horas h1{
  font-size: 63px;
  font-family: proximaNovaSembold;
  text-align: center;
  color: #4e4e4e;
}
.aulas h1{
  font-size: 63px;
  font-family: proximaNovaSembold;
  text-align: center;
  color: #4e4e4e;
}
span.textDefinition{
  color: #4e4e4e;
  text-align:center;
  font-size: 25px;
  font-family: proximaNovaRegular;
  margin-top: -50px !important;
}
.descriptionDiv{
  margin: 0 auto;
  text-align: center;
}
.textDescription {
  margin-top: 190px !important;
  padding:5%;
  color: #4e4e4e;
  font-size: 15px;
  font-family: proximaNovaRegular;
  text-align: center;
}
.aboutlist {
  text-align: center;
}
.aboutlist ul{
  margin-left: 30px;
}
.aboutList ul li{
  color: #4e4e4e !important;
  font-size: 15px;
  font-family: proximaNovaRegular;
  text-align: center;
}

h3.nhTitle {
	color: #0581c2;
	font-family: proximaNovaSembold;
	font-size: 18px;
}
p.nhText {
	margin-top: -8px;
	color: #4e4e4e;
	font-family: proximaNovaRegular;
	font-size: 14px;
	line-height: 14px;
}

Você saberia me dizer o que eu tenho que modificar para que funcione corretamente?

Obrigado :D