My dear, I'm having a problem with the bootstrap grid system, I do not know why, but when I resize the site to the size of a device, it does not fit neatly. Any suggestion?
HTML:
<htmllang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anuncie Já - Nossos Planos</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script><scriptsrc="bootstrap/js/bootstrap.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css-anuncio/style-planos.css" rel="stylesheet">
</head>
<body>
<?php
include 'menu.php';
?>
<div class="container">
<div class="row">
<h1 id="titulo-h1">Anuncie vaga de emprego</h1>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="planos_simples">
<p>Recomendado</p>
</div>
<div class="planos_simples_detalhes">
<h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
<h1>DESTAQUE
<span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
</h1>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
<button type="button" class="botao_mensal" id="criarConta">
CONTRATAR
</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="plano_premium">
<p>Recomendado</p>
</div>
<div class="plano_premium_detalhes">
<h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
<h1>DESTAQUE
<span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
</h1>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
<button type="button" class="botao_semanal" id="criarConta">
CONTRATAR
</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="plano_anuncio">
<p>Recomendado</p>
</div>
<div class="plano_anuncio_detalhes">
<h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
<h1>DESTAQUE
<span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
</h1>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
<p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
<button type="button" class="botao_anuncio" id="criarConta">
CONTRATAR
</button>
</div>
</div>
</div>
</div>
</body>
</html>