We Keep Coding

How to change icons - and + when toggling divs using Jquery?

I am trying to code a section in HTML where you click a div it will expand its contents and other divs will toggle/hide. This is what I have and it is working perfectly:
If I click in the Personaliza title it will expand its contents and toggle/hide the other two titles.
Check the website in the third section: https://uniformaguatemalapruebas.herokuapp.com/
I am trying to add an icon - when the div is selected or expanded and the other two will show + icon. And If I click any title it will show + others will show -. If none are expanded they all will show +.
My issue is very simple but I am struggling at this.
This is what I have so far:
<section id="about-us">
<div class="container">
<div class="row">
<div class="col-6 col-12-narrower ">
<div class="quienes-somos contr">
<div class="container-aboutus">
<!-- <div>
<p class="title-h5">
"Lo más importante no es destacar,
<br/>
es ser recordado"
</p>
</div> -->
<div class="title-big">
<h2>¿Quiénes somos?</h2>
</div>
<div class="hr-aboutus"></div>
<div id="aboutus-texts">
<div class="uniforma-text">
<div class="main-title">
<h4>Unifica
<span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item" id="active-item">
<p>
Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
Ofrecemos a nuestros clientes soluciones integrales y MODA.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Personaliza</h4>
</div>
<div class="item">
<p>
Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Identifica</h4>
</div>
<div class="item">
<p>
Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
Todas nuestras prendas tienen garantía contra defecto de fabricación.
</p>
</div>
</div>
</div>
<div class="contact-button-aboutus">
<button class="button danger">
<span>Contactar</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-6 col-12-narrower uniforma-main-image-tr">
<div class="quienes-somos">
<div class="image featured">
<h1>
<img src="/images/esta133.jpeg" alt="para-quien-hace-de-su-labor-una-pasion-dia-con-dia"/>
</h1>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();
//if I click any title it will expand itself and toggle off others.
$('#aboutus-texts .uniforma-text .main-title ').click(function(e){
e.preventDefault();
var block = $(this).parent().find('p');
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
block.toggle(200);
});
PD: I am using Font awesome for icons.

maybe you can try this
// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();
const setIcon = (icon, show) => {
if (show) {
icon.removeClass("fa-plus");
icon.addClass("fa-minus");
} else {
icon.removeClass("fa-minus");
icon.addClass("fa-plus");
}
}
$('#aboutus-texts .uniforma-text .main-title ').click(function(e) {
const block = $(this).parent().find('p');
const icon = $(this).find(".iconshow");
setIcon(icon, icon.hasClass("fa-plus"));
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
$("#aboutus-texts .uniforma-text .item p").not(block).each((i, item) => {
const icon = $(item).parent().parent().find(".iconshow");
setIcon(icon, false);
});
block.toggle();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<section id="about-us">
<div class="container">
<div class="row">
<div class="col-6 col-12-narrower ">
<div class="quienes-somos contr">
<div class="container-aboutus">
<!-- <div>
<p class="title-h5">
"Lo más importante no es destacar,
<br/>
es ser recordado"
</p>
</div> -->
<div class="title-big">
<h2>¿Quiénes somos?</h2>
</div>
<div class="hr-aboutus"></div>
<div id="aboutus-texts">
<div class="uniforma-text">
<div class="main-title">
<h4>Unifica
<span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item" id="active-item">
<p>
Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
Ofrecemos a nuestros clientes soluciones integrales y MODA.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Personaliza
<span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item">
<p>
Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Identifica
<span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item">
<p>
Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
Todas nuestras prendas tienen garantía contra defecto de fabricación.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Focusout and click button don't work with childs element's

I have a list of div, each div with a button. When I click a button a text is displayed, and when I click out, the info hides with focus out function. If I have a button opened and I want to click a parent button, it's work's well, the button that was opened closes and the new button that I pressed open at the same time. The problem is when I want to do this action with a button that is next, it's don't do the two things and the same time (focus out and click the new button). Live example to check it: https://www.lagaleramagazine.es/
$(".p1").hide();
$(".p1-img").hide();
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
$(this).focusout(function() {
$(".p1").hide();
$(".p1-img").hide();
$(this).text('Más detalles');
});
var $p1 = $(this).next(".p1").toggle();
var $p1img = $(this).parents().eq(4).find(".p1-img").toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule">
<span class="ev-day">25</span>
<span class="ev-mo">febrero</span>
<span class="ev-yr">2019</span>
</div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title">
<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
</h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas
para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
Ir al evento »
</div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue">
<span class="ect-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<span class="ect-venue-details ect-address">
Area de atención al Mayor , Ayuntamiento de Badajoz,
<span class="tribe-address">
<span class="tribe-locality">Badajoz</span>
<span class="tribe-delimiter">,</span>
<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
<span class="tribe-country-name">España</span>
</span>
</span>
<span class="ect-google">
<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
</span>
<div class="ect-rate-area">
<span class="ect-rate-icon">
<i class="fa fa-money" aria-hidden="true"></i>
</span>
<span class="ect-rate">Gratuito</span>
</div>
</div>
</div>
</div>
</div>
</div>

I suggest you can remove the focusout functionality and use click event only since its more accessible. Please check the example below.
Note: The reason why focusout is not working for you is that you are targeting a global class .p1 and hiding it, which is basically hiding the other p tags as well.
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
var $p1 = $(this).next(".p1");
var $p1img = $(this).parents().eq(4).find(".p1-img");
$p1.toggle();
$p1img.toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
.p1,
.p1-img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-55758" class="ect-list-post ect-featured-event data-parent-post-id=" 51063 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/timthumb.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Exposición : “16 personajes que maravillan y … Miguel de Cervantes”." rel="bookmark">Exposición : “16 personajes que maravillan y … Miguel de Cervantes”.</a></h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>El próximo 11 de enero, se inaugurará en la Biblioteca Pública del Estado "Bartolomé J. Gallardo" de Badajoz , esta exposición que traza la vida literaria de Miguel de Cervantes(1547-1616), a través de un recorrido por su propia
obra y acompañado de otros 16 personajes que conmemoran la muerte del autor, incluyendo la presencia del novelista en...</p> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/"
class="ect-events-read-more" rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><span class="tribe-address"><span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr"
title="Badajoz">Badajoz</abbr><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span></div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="event-58349" class="ect-list-post ect-simple-event data-parent-post-id=" 58345 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/02/cropped-32396-vegetables-1920x1200-photography-wallpaper.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Come con la cabeza, no con la boca – Charlas para niños" rel="bookmark">Come con la cabeza, no con la boca – Charlas para niños</a></h2>
<button class="btn1 button-more svg"><span>Más detalles</span></button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Fundación CB lanza de nuevo una campaña para educar y concienciar a los niños y padres sobre la importancia de seguir unos hábitos alimenticios saludables. Por la mañana se ofrecerán las charlas a los alumnos y por la tarde a los padres interesados
en ampliar conocimientos sobre buenos alimentos, enfermedades relacionadas con una mala alimentación,...</p> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" class="ect-events-read-more"
rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address">Fundación CB,<span class="tribe-address"><span class="tribe-street-address">C/ Pablo Sorozábal, s/nº1,</span> <br> <span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-postal-code">06006</span><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=C%2F+Pablo+Soroz%C3%A1bal%2C+s%2Fn%C2%BA1%2C+Badajoz+Badajoz+06006+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span>
<div class="ect-rate-area"><span class="ect-rate-icon"><i class="fa fa-money" aria-hidden="true"></i></span> <span class="ect-rate">Gratuito</span></div>
</div>
</div>
</div>
</div>
</div>

Difficulty with CSS

This is my current plan: making the button with the white circle around, does not even need the WhatsApp icon.
But after so much hitting my head and looking for a solution, I could not find the solution and came for help.
It's coming out like this:
Someone can help me?
The HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="piauí fábio abreu segurança eleições">
<title>Fábio Abreu</title>
<meta property="og:title" content="Fábio Abreu">
<meta name="twitter:title" content="Fábio Abreu">
<meta name="description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta name="twitter:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta name="twitter:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:secure_url" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:width" content="600">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Fábio Abreu">
<meta property="og:url" content="http://www.fabioabreupi.com.br/">
<meta property="og:type" content="website">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="smUoPpsSNtD2udIYqosIhQyHKaWY5tK49rUhJBLTElTKMCyIgbxE3BAqVwLvADny/9UZ+J6IGf29QvjPM72Fvw==" />
<link rel="stylesheet" media="all" href="/assets/site-dc393f9cdad26bd31342ace6c0e567e3893492c1ec06c16976bea61958ce06ad.css" />
<link rel="stylesheet" media="all" href="/assets/default/css/main-5c3e617fe669fbfd1915fd6ba42ddae97daaf842e3037fde45d55bfdd0f7b4aa.css" />
<link rel="canonical" href="http://www.fabioabreupi.com.br/">
<link rel='shortcut icon' type='image/x-icon' href='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_95e76849-329a-449b-8e1b-f118083035a4.png' /> <link href='https://fonts.googleapis.com/css?family=Roboto Condensed:400,400i,700,700i' rel='stylesheet'> <style>
#TopMenu ul#menu-main li a,#TopMenu ul#menu-main li a span.caret{font-size:14px !important;text-transform:uppercase !important}
#MainHeader{background-color:rgba(0, 0, 0, 0) !important}
h3{font-size:15px !important;font-family:'Roboto Condensed' !important;font-weight:bold !important}
footer#MainFooter{background-color:rgba(255, 255, 255, 1) !important;border-color:rgba(255, 255, 255, 1) !important}
</style>
<style>#TopMenu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2722ad+28,ff3b21+100 */
background: #2722ad; /* Old browsers */
background: -moz-linear-gradient(left, #2722ad 28%, #ff3b21 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2722ad 28%,#ff3b21 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2722ad 28%,#ff3b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2722ad', endColorstr='#ff3b21',GradientType=1 ); /* IE6-9 */
}
#menu-main{
padding: 0px 20px 0px 9px;
margin: 0px 20px 0px 9px;
word-spacing: 0px;
}
#menu-main li:last-child{
padding-left: 178px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-radius: 42px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px
text-decoration:none;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:44px;
}
}
#menu-main li:nth-last-child(2){
padding-left: 20px;
}
#menu-main li:nth-last-child(3){
padding-left: 20px;
}
#menu-main li:nth-last-child(4){
padding-left: 20px;
}
#menu-main li:nth-last-child(5){
padding-left: 20px;
}
#MainHeader{
padding: 0px 0px 0px 5px;
}
#MainFooter{
background-color: #00004d
}
#GroupList1{
background-color: #ffffff;
box-shadow: none;
}
#lws-homesection-title{
text-align: center;
}
#GroupList2{
display: none;
}</style>
</head>
<body class="palette-red">
<div id="fb-root"></div>
<header id="MainHeader">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-3">
<div class="LogoArea">
<a href="/" id="BrandImage">
<img src="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png" alt="Fábio Abreu" class="img-responsive center-block">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div id="ContactsTop">
</div>
</div>
</div>
</div>
</header>
<nav id="TopMenu" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul id="menu-main" class="nav navbar-nav" data-hover="dropdown" data-animations="zoomIn">
<li>Início</li>
<li>NOTÍCIAS</li>
<li>FOTOS</li>
<li>PROJETOS</li>
<li>BIOGRAFIA</li>
<li>ENTRE EM CONTATO</li>
</ul>
</div>
</div>
</nav>
<div id="mySlide">
<div style="width:100%;" id="bf494d0c-d537-4f36-bdf2-4754dbee0839" class="inner-content-slide carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover"><ol class="carousel-indicators"><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="0" class="active"></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="1" class=""></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="2" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><div data-img-height="481" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_f5a4a97f-204c-4538-bc79-d4bed4be75f3.jpeg);background-size:cover"></div></div><div class="item "><div data-img-height="480" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_06fa6929-4e05-4d40-aebd-99233e3852d6.JPG);background-size:cover"></div></div><div class="item "><div data-img-height="488" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_471118d4-7857-496c-b0db-21d5479de784.jpg);background-size:cover"></div></div></div><a class="left carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="prev"><i class="icon-prev"></i><span class="sr-only">Anterior</span></a><a class="right carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="next"><i class="icon-next"></i><span class="sr-only">Próximo</span></a></div>
</div>
<div class="marketing">
<div class="container"><section data-section-area='V10'><div data-section='home-section' data-area='V10' data-section-id='c60fb099-5b76-4835-a254-f7ead8bde197'><div class='lws-homesection-text-image'><div class='row'><div class='col-xs-12 col-sm-12 col-md-6'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_edab1478-6055-4a29-aa01-1fe4426e6ff2.png' class='img-responsive'></div><div class='col-xs-12 col-sm-12 col-md-6'><div class='lws-homesection-body'>Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire. Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.</div></div></div></div></div></section></div>
<div id="GroupList1">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group1">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png" data-iw-image="image_group1" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group1">Projetos</h2>
<p data-iw-multiline="body_group1"></p>
<a data-iw-link="link_group1" class=" btn btn-primary" href="categories/projetos" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group2">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png" data-iw-image="image_group2" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group2">Biografia</h2>
<p data-iw-multiline="body_group2"></p>
<a data-iw-link="link_group2" class=" btn btn-primary" href="biografia" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group3">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png" data-iw-image="image_group3" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group3">Fotos</h2>
<p data-iw-multiline="body_group3"></p>
<a data-iw-link="link_group3" class=" btn btn-primary" href="categories/fotos" role="button">Saiba mais</a>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V20'><div data-section='home-section' data-area='V20' data-section-id='a40ab6b2-e909-4021-99b5-ac1ebde763d7'><h2 class='lws-homesection-title'>Notícias destaque</h2><div class='lws-homesection-resource-list'><div class='row'><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_dc88125b-b8f3-4455-bcbc-de7d9d0720ca.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu troca PTB pelo PR e tenta reeleição a deputado federal</h4><div class='resource-list-excerpt'>No evento de filiação ao PR, Fábio Abreu anunciou sua pré-candidatura a deputado federal e afirmou que está preparado para disputar a reeleição. O ...</div><a href='/posts/fabio-abreu-troca-ptb-pelo-pr-e-tenta-reeleicao-a-deputado-federal' class='btn btn-primary'>Veja mais</a></div></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_d445acdc-1a7f-4b75-a96c-76f3e0cf67d3.jpg);background-size:cover'></div><h4 class='resource-list-title'>Antes de entregar cargo, Fábio Abreu apresenta Plano de Segurança</h4><div class='resource-list-excerpt'>
O documento traça uma linha de trabalho para o setor pelos próximoa s20 anos e prevê investimentos que começam com um empréstimo junto ao BNDES p...</div><a href='/posts/antes-de-entregar-cargo-fabio-abreu-apresenta-plano-de-seguranca' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs col-sm-12 hidden-md hidden-lg"></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_56e67980-ecd2-444e-a0d9-e2c8a8735420.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu destaca falta de atenção a segurança pública</h4><div class='resource-list-excerpt'>
Em entrevista ao Acorda Piauí, o deputado federal Fábio Abreu (PR), destacou que, enquanto a falta de segurança pública é um dos problemas mais a...</div><a href='/posts/fabio-abreu-destaca-falta-de-atencao-a-seguranca-publica' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs hidden-sm col-md-12 col-lg-12"></div></div></div></div></section></div>
<div id="GroupList2">
<div class="container">
<div class="GL2-item" data-iw-group="group4">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group4" class="featurette-heading"></h2>
<p data-iw-multiline="body_group4" class="lead"></p>
<a data-iw-link="link_group4" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group4" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group5">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group5" class="featurette-heading"></h2>
<p data-iw-multiline="body_group5" class="lead"></p>
<a data-iw-link="link_group5" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group5" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group6">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group6" class="featurette-heading"></h2>
<p data-iw-multiline="body_group6" class="lead"></p>
<a data-iw-link="link_group6" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group6" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V30'></section></div>
</div>
<footer id="MainFooter">
<div class="container">
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F10'><div data-section='home-section' data-area='F10' data-section-id='f97be27b-c0e9-4229-b584-64ee920ef08a'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_3939ae3f-43d1-4f63-a724-741c5ae11f47.png' class='img-responsive'></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F20'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F30'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F40'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F50'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F60'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F70'></section></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="contacts_footer list-inline">
<li></li>
<li></li>
<li></li>
</ul>
<p>© 2018 - Fábio Abreu</p>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F80'><div data-section='home-section' data-area='F80' data-section-id='76c13c4e-249f-4cac-b9ae-e2a56220e80c'><div class='lws-homesection-body'>Todos os direitos reservados.
</div></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F90'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F100'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F110'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F120'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F130'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F140'></section></div>
</div>
</div>
</div>
</div>
</footer>
<script src="/assets/site-fd70af901fb20b8029f75be40e0f5ff5848d5415b704279fd88ad5bc9c0ec4ec.js"></script>
<script src="/assets/default/js/main-efff309d3722bafb3f5fa5a2092f366e799cac0d724996ca31c7e52b408475ec.js"></script>
<div id="side-social-networks-loguei" role="group" class="list-unstyled btn-group-vertical">
</div>
<aside id="AVS-ContactButtons" class="">
<ul class="list-unstyled">
</ul>
</aside>
<script>
setTimeout(function(){
$('#AVS-ContactButtons ul li a span').css({
right: '-200px'
});
}, 4000);
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1982872918652221',
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.onload = function() { fbAsyncInit(); }
js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11&appId=1982872918652221';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
var NEWSLETTER_URL = '/fabio-abreu-1/newsletters';
var DEFAULT_ADDRESS = '';
$('.iw-contact-form').submit(function(e){
e.preventDefault();var f = $(this);$.ajax({
url:'/contact/fabio-abreu-1?authenticity_token=%2FLURz%2Fx9fdgyLq2zjSHViEkAz%2BQpMcS5Jvvnqwx9hveE4BV55tMP1NS9KKnIquT%2FulL%2FuS9fD%2FxtDD5ALRMRHA%3D%3D',
type:'POST',data:f.serialize(),success:function(){
var redir = $('#iw_redir_loguei_cf').length;
if (redir == 0) {alert('Email enviado com sucesso');f[0].reset();} else {
var to = $('#iw_redir_loguei_cf').val(); window.location=to;
}
},error:function(){alert('Erro ao enviar email');}
});
});
</script>
</body>
</html>
This is the CSS code:
#menu-main li:last-child{
padding-left: 378px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-top-left-radius:42px;
border-radius-topleft:42px;
border-top-left-radius:42px;
border-top-right-radius:42px;
border-radius-topright:42px;
border-top-right-radius:42px;
border-bottom-right-radius:42px;
border-radius-bottomright:42px;
border-bottom-right-radius:42px;
border-bottom-left-radius:42px;
border-radius-bottomleft:42px;
border-bottom-left-radius:42px;
text-indent:0px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px;
text-decoration:none;
text-align:center;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:1px;
}

I would be happy to help, but I would need to see your HTML, so please add it to the question.
I imagine that:
It has too much width
You probably need some margin around it to make it centered more on the navbar
That padding-left: 378px; should likely be margin-left or nothing, as that might be causing the over-sided width
Also, if you want the WhatsApp icon you can check out https://fontawesome.com/icons/whatsapp?style=brands

You can just set border-radius: 42px; instead of doing each corner by itself.
try using float: right; on the button and I think you were trying to use margin-left and not padding-left on #menu-main li:last-child

How to make buttons inside columns equal in height on all devices?

My Bootstrap columns are equal in height no matter the size of the device (computers, tablets, phones, etc.) thanks to JavaScript's MatchHeight.
But the problem is that I also want to make the buttons inside them equal in height despite different amount of text above them. I've tried min-height, margin-bottom (aren't responsive). How can I achieve this? With bootstrap somehow, or js, or something but it's important for aesthetics!
EDIT: This is what I want to achieve: https://i.stack.imgur.com/NOlns.png
Buttons stay the same no matter what!
#section4 .divider-fullwidth {
margin-bottom: 15px;
}
#section4 .lastdivider {
margin-top: 50px;
}
#section4 .box {
margin: 1px;
margin-bottom: 30px;
padding: 5% 8%;
}
#section4 .btn {
font-size: .9em;
padding: 5% 4%;
width: 100%;
}
#section4 .innerBox {
min-height: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_section4">
<div id="section4" class="container">
<div class="row intro">
<h2>ESCOGE TU PLAN</h2>
<p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p>
</div>
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
</div>
</div>
</div>

Below is the solution, I assume ,this is what you are looking for.
.box{
position: relative;
height:500px;
}
.btn{
position: absolute;
bottom:0px;
width: auto; //You can adjust the width accordingly
}
You can adjust the height of your div accordingly.
.box {
border: 1px solid black;
padding: 20px;
margin: 20px;
position: relative;
height: 440px;
}
.btn {
font-size: .9em;
float: none;
width: auto;
position: absolute;
bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
</div>
Padding given to .box is causing the issue.

Smooth scroll anchor link requires unwanted double click

Hey I'm trying to fix a tab inspired page for mobile. When the user clicks on a round circle it should ge to the text. Than when you click "Terug naar keuzemenu" you should go back to the circles (the navigation of the tabs). However when I want to go to other tabs the first time I click he doesnt scroll to the text section but the second time he does. So i have to click twice but cant figure out why.
FIDDLE
https://jsfiddle.net/Ljv5a2ez/2/
HTML
<div class="span12" id="xx-content">
<div class="clearfix row-fluid">
<div class="xx_content_inner">
<div class="xx_row-12" id="aj_logobox">
<div class="span3">
<div class="xx_active check-up-overview" id="lente">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#hometext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/home_delivery.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="full">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#collecttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/click_and_collect.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="pro">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#moretext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/look_for_more.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="ebike">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#smarttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/smartpay_cirkel.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="xx_row-2 lente bike-show" id="hometext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Gratis thuis leveren vanuit je A.S.Adventure Store</h2></span></p>
<p class="xx_excl">Sta je in de winkel en is het product van je dromen niet meer beschikbaar in een andere maat of kleur?<br> Geen nood: indien voorradig in een andere A.S.Adventure Store, <strong>bestellen</strong> we het gewenste product in de Store en <strong>leveren</strong> we het <strong>gratis</strong><br> op een <strong>adres naar keuze</strong>. Van service gesproken.</p>
</div>
<div class="xx_row-2 full bike-hide" id="collecttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Maak je keuze online en haal je bestelling op in de winkel</h2></span></p>
<p class="xx_excl">Vanuit je luie zetel shoppen? Winkelen bij A.S.Adventure kun je altijd en overal. Wil je helemaal zeker zijn van de maat of kleur?<br> <strong>Reserveer online zonder aankoopverplichting</strong> via de Click & Collect service en haal je bestelling later op in jouw<br> <strong>favoriete A.S.Adventure Store</strong>. Je kiest zelf wat je wel of niet koopt.</p>
</div>
<div class="xx_row-2 pro bike-hide" id="moretext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Ontdek een nog uitgebreider aanbod in onze webshop</h2></span></p>
<p class="xx_excl">Dacht je dat je alles al gezien had in onze Stores? Think again! In <strong>onze webshop vind</strong> je van de onderstaande merken een <strong>nog uitgebreider aanbod</strong>. <br>Gebruik de schermen in de Stores om naar de webshop te surfen of grasduin online door ons aanbod.<br> Keuze gemaakt? Laat je producten dan <strong>gratis afleveren</strong> via Home Delivery.</p>
</div>
<div class="xx_row-2 ebike bike-hide" id="smarttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Betaal je aankopen in de winkel met je smartphone</h2></span></p>
<p class="xx_excl">Merk je tijdens het winkelen dat je je portefeuille bent vergeten? Geen nood, vanaf nu kun je <strong>in alle A.S.Adventure Stores ook betalen met SmartPay</strong>. <br>Even je <strong>smartphone</strong> opdiepen, de <strong>Bancontact-app</strong> openen en de <strong>unieke QR-code</strong> aan de kassa inscannen. <br>Je hoeft dan alleen nog even de betaling te bevestigen met je pincode. Makkelijk, veilig en efficiënt!</p>
</div>
</div>
</div>
<div class="clearfix row-fluid lente bike-show">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> We bestellen samen in de Store met jou het gewenste artikel via onze website.</li>
<li><span>2.</span> Je betaalt aan de kassa.</li>
<li class="xx_last-item"><span>3.</span> Je bestelling wordt enkele dagen later geleverd op een adres naar keuze of bij een afhaalpunt.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid full bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Reserveer en betaal je product(en) online.</li>
<li><span>2.</span> Kies de winkel waar je je product(en) wenst af te halen.</li>
<li><span>3.</span> Je ontvangt via mail een bevestiging van je bestelling.</li>
<li><span>4.</span> Via mail of sms verneem je wanneer je product(en) klaarliggen.</li>
<li class="xx_last-item"><span>5.</span> Mocht je in de winkel alsnog beslissen je aankoop te annuleren, krijg je onmiddellijk je geld terug.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid pro bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Uitgebreid aanbod:</h3>
<div id="xx_aanbod_logos">
<a alt="Fjallraven" href="http://www.asadventure.com/benl/fjallraven" target="_parent"><img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_fjallraven.png" /> </a>
<a alt="The North Face" href="http://www.asadventure.com/benl/the-north-face" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_the-north-face.png" /> </a>
<a alt="Vaude" href="http://www.asadventure.com/benl/vaude" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_vaude.png" /> </a>
<a alt="Garmin" href="http://www.asadventure.com/benl/garmin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_garmin.png" /> </a>
<a alt="Thule" href="http://www.asadventure.com/benl/thule" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_thule.png" /> </a>
<a alt="Eastpak" href="http://www.asadventure.com/benl/eastpak" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_eastpak.png" /> </a>
<a alt="Millet" href="http://www.asadventure.com/benl/millet" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_millet.png" /> </a>
<a alt="Gore Bike wear" href="http://www.asadventure.com/benl/gore-bike-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_bike.png" /> </a>
<a alt="Gore Running wear" href="http://www.asadventure.com/benl/gore-running-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_running.png" /> </a>
<a alt="Mi-Pac" href="http://www.asadventure.com/benl/mi-pac" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_mi-pac.png" /> </a>
<br>
<a alt="Suunto" href="http://www.asadventure.com/benl/suunto" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_suunto.png" /> </a>
<a alt="Polar" href="http://www.asadventure.com/benl/polar" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_polar.png" /> </a>
<a alt="Camel Active" href="http://www.asadventure.com/benl/camel-active" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_camel_active.png" /> </a>
<a alt="Dakine" href="http://www.asadventure.com/benl/dakine" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_dakine.png" /> </a>
<a alt="Lowa" href="http://www.asadventure.com/benl/lowa" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_lowa.png" /> </a>
<a alt="CKS" href="http://www.asadventure.com/benl/cks-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_cks_black.png" /> </a>
<a alt="Komono" href="http://www.asadventure.com/benl/komono" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_komono.png" /> </a>
<a alt="Jack Wolfskin" href="http://www.asadventure.com/benl/jack-wolfskin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_wolfskin.png" /> </a>
<a alt="BakerBridge" href="http://www.asadventure.com/benl/baker-bridge" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge.png" /> </a>
<a alt="BakerBridge Dames" href="http://www.asadventure.com/benl/baker-bridge-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge-dames.png" /> </a>
<a alt="Bergans" href="http://www.asadventure.com/benl/bergans" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_bergans.png" /> </a>
<a alt="Van Hassels" href="http://www.asadventure.com/benl/van-hassels" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_van-hassels.png" /> </a>
</div>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid ebike bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Installeer de Bancontact-app op je smartphone:</li>
<li><span></span><a target="_blank" href="https://play.google.com/store/apps/details?id=mobi.inthepocket.bcmc.bancontact&hl=en">Google Play >></a></li>
<li><span></span><a target="_blank" href="https://itunes.apple.com/be/app/bancontact-mobile/id858371800?l=en&mt=8">Apple App Store >></a></li>
<li><span></span><a target="_blank" href="https://www.microsoft.com/en-gb/store/apps/bancontact/9nblggh3fvl1">Microsoft Store >></a></li>
<li><span>2.</span> Open de Bancontact-app en volg de instructies om de app te activeren en je bankkaart(en) toe te voegen.</li>
<li><span>3.</span> Aan de kassa scan je de unieke QR-code die op de betaalterminal verschijnt om je betaling te bevestigen.<br> Dat kan gewoon vanuit de Bancontact-app.</li>
<li><span>4.</span> Je smartphone toont de naam van de winkel en het te betalen bedrag op het scherm.</li>
<li class="xx_last-item"><span>5.</span> Druk op OK, geef je pincode op in de app en je krijgt een bevestigingsbericht te zien op je telefoon. Transactie geslaagd!</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
</div>
JS TABS
$(document).ready(function () {
$('.check-up-overview').click(function () {
if (!$(this).hasClass('xx_active')) {
var sCurrent = $(this).attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
});
});
JS SMOOTH
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

It was because of your click handler on the parent class .check-up-overview.
It cause double trigger when you click on the circle which explains why you have to click twice to bind the scrollTop() function.
Here the JS code changed :
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
if (!$(this).parents('.check-up-overview').hasClass('xx_active')) {
var sCurrent = $(this).parents('.check-up-overview').attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).parents('.check-up-overview').addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
if($(window).width() < 768){
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function() {
//window.location.hash = target;
});
}else{
e.preventDefault();
}
});
});
And here is the working fiddle