I’m having trouble getting this div centralized and Responsive

Question

I’m having trouble letting that div centralized and Responsive someone could and help?

.ml{
	text-align: center;
	color:#3A89AF;
}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
	margin-right: 60px;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

	<div class="ml">
		<h2>Caso prefira o Mercado Livre</h2>
		<p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
	  <a href="#" class="action-button shadow animate blue">Diamante</a>
	  <a href="#" class="action-button shadow animate platina">Platina</a>
	  <a href="#" class="action-button shadow animate gold">Gold</a>
	  <a href="#" class="action-button shadow animate prata">Prata</a>
	  <a href="#" class="action-button shadow animate bronze">Bronze</a>
	</div>

Answer 1

Just take the float: left of .action-button (otherwise elements go to the left), take the margin-right: 60px; of .bronze (otherwise it makes a spacing on the right side of 60 pixels and prevents centering) and change the margin of .action-button for margin: 5px; (all margins equal, in this case, is important not only in centering but for equal spacing from one button to the other):

.ml{
	text-align: center;
	color:#3A89AF;
}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
   margin: 5px;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
   display: inline-block;
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

<div class="ml">
   <h2>Caso prefira o Mercado Livre</h2>
   <p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
   <a href="#" class="action-button shadow animate blue">Diamante</a>
   <a href="#" class="action-button shadow animate platina">Platina</a>
   <a href="#" class="action-button shadow animate gold">Gold</a>
   <a href="#" class="action-button shadow animate prata">Prata</a>
   <a href="#" class="action-button shadow animate bronze">Bronze</a>
</div>

Answer 2

In class .ml a add the following attributes:

display:inline-block;
float:none;

.ml{
	text-align: center;
	color:#3A89AF;
  min-width:100%;
  margin:auto;

}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
    display:inline-block;
    float:none;

}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
	margin-right: 60px;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

<div class="ml">
		<h2>Caso prefira o Mercado Livre</h2>
		<p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
    
	  <a href="#" class="action-button shadow animate blue">Diamante</a>
	  <a href="#" class="action-button shadow animate platina">Platina</a>
	  <a href="#" class="action-button shadow animate gold">Gold</a>
	  <a href="#" class="action-button shadow animate prata">Prata</a>
	  <a href="#" class="action-button shadow animate bronze">Bronze</a>

</div>