How to change position for a div who has class card - html

Good evening,
I am developing a website for online purchase.
i want my div down a little down for which aye the same positioning as any other class card div.
here is an image to better understand:
How can you see the div that contains the "yopro" and a little up not like the first.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<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>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix" >Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 530px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and here is my css code:
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
display:inline-block;
margin-right: 65px;
}
.btn-achat{
margin-bottom: 30px;
margin-top: 15px;
}
#card2{
display: inline-block;
}
.cardcss{
display: inline-block;
}
Thank you in advance for your help !


Give your images a fixed height and percentage width, and use object-fit: cover and object-position:center. Something like this:
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
#h1_all_product {
text-align: center;
font-size: 2em;
text-transform: uppercase;
color: #2a2b75;
}
.prix {
color: red;
font-size: 150%;
display: inline-block;
margin-right: 65px;
}
.btn-achat {
margin-bottom: 30px;
margin-top: 15px;
}
#card2 {
display: inline-block;
}
.cardcss {
display: inline-block;
}
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss">
<img src="https://placekitten.com/300/600" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" id="card2">
<img src="https://placekitten.com/300/550" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>

Related

I can't put my <i> tags in display inline. How do this?

I need to do this :
And I have this: (The background color is only to check if the code is working).
My code is :
/*Barra de Navegação - Inicio*/
header{
background-color: rgb(180, 177, 172);
}
.nav-link{
margin: 6px;
padding: 0px;
color: white;
padding-top: 10px;
}
.container-fluid{
margin-left: 30%;
}
/*Barra de Navegação - Fim*/
/*Perfil - Inicio*/
#perfil div img{
width: 100%;
margin: 20px;
}
#textos-objetivos{
margin: 20px;
margin-bottom: 20%;
}
#textos-objetivos p {
margin: 20px;
}
.negrito{
font-weight: bold;
}
.redesSociais{
margin: 20px;
display: inline;
}
.redesSociais i {
background-color: chocolate;
}
/*Perfil - FIM*/
!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/cac7eabb61.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header class="container">
<div class="row">
<div class="col-12 col-md-6 menu">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<span class="nav-link" >|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">projetos</a>
</li>
<li class="nav-item">
<span class="nav-link" >|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">experiência</a>
</li>
<li class="nav-item">
<span class="nav-link" >|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">repositórios github</a>
</li>
<li class="nav-item">
<span class="nav-link" >|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Conteúdo</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 searchBar">
<nav class="navbar navbar-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main class="container">
<div class="row" id="perfil">
<div class="col-12 col-md-3">
<img src="imgs/eu.jpeg" alt="">
</div>
<div class="col-12 col-md-9">
<div class="row" id="textos-objetivos">
<h1>Thiago Soares Mota</h1>
<p><span class="negrito">Objetivos:</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam voluptatem exercitationem minima totam eaque ratione quasi facilis incidunt, iusto aliquid beatae impedit recusandae inventore possimus eum ipsa temporibus corrupti?</p>
</div>
<div class="row redesSociais">
<h2>Redes Sociais</h2>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="row" id="projetos">
<div class="row">
<h2>Projetoss</h2>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="row cards">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
<div class="card-body">
<p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
<div class="card-body">
<p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
<div class="card-body">
<p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
<div class="card-body">
<p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
I try put de line display: inline; in .redesSociais i and other places, but no workink. The code doesn't seem to respond to the commands I put correctly. I aways have a display block. What is my mistaque ?
The post method asks me to put in more details. But I don't have much more to complement. So I'm going to put more text here for the question to be approved.

The reason it is not working is because you cannot have a row without a column in bootstrap.
Right now you have
<div class="row redesSociais">
<h2>Redes Sociais</h2>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
but it needs to just be:
<div class="redesSociais">
<h2>Redes Sociais</h2>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
By removing the row class, it should solve the issue.

.redesSociais i{
display : inline !important;
}

Why my button does not move even if I make a margin?

Good evening,
I am developing an online shopping site for supermarkets.
The problem I have is that I want to move a button upwards so that it is in the same line of a text, I show you the image so that you understand better:
you see the buy button I want to put it in the same line as the "price: 2.5 dhs", I put a margin-bottom : 30px;
but it does not work the button does not move!
I do not know if it is a problem of template that puts conditions because I download the template aroma.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<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>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is my css code :
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
Thank you in advance for your help !

You have to wrap and in a div
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
and give it a class here in my demo i have given it name myClass and add following properties:
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
Working demo:
Note : i don't have all you local images so i have only focussed on your requirement, so do scroll down and check checkout button alignment with price.
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<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>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="./text.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span
class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors
profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre
site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici
sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine
<i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>

you should add this line to your css file:
.prix {
color: red;
font-size: 150%;
display:inline-block
}
and delete this one:
.btn-achat {
/* margin-left: 200px; */
margin-bottom: 50px;
}

How to remove the underline from the link on the button?

Good afternoon! I am reviewing a college paper and wanted to remove the underline from the link inside the button, the underline only appears when hovering over the button. I would like to remove the underline to make the button totally clean, can anyone tell me which tags are used to remove?
body {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.div {
display: inline-block;
}
.botao {
width: 30px;
height: 45px;
border-radius: 25px;
}
.esquerda {
margin-right: 5%;
}
.indicador {
width: 30px;
height: 45px;
border-radius: 25px;
}
.indicador:visited {
width: 300px;
height: 45px;
border-radius: 25px;
}
#compra {
background-color: orange;
width: 10%;
margin-top: 3.5%;
border-radius: 25px;
}
.btn {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3">
<hr>
</div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Simply added this CSS rule to your existing code in last line
a {text-decoration: none;}
body{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.div{
display:inline-block;
}
.botao{
width:30px;
height:45px;
border-radius:25px;
}
.esquerda{
margin-right:5%;
}
.indicador{
width:30px;
height:45px;
border-radius:25px;
}
.indicador:visited{
width:300px;
height:45px;
border-radius:25px;
}
#compra{
background-color:orange;
width:10%;
margin-top:3.5%;
border-radius:25px;
}
.btn, a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3"><hr></div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Resize navbar in smaller screens and move it to the right

I Need help to move the navbar to the right side, since the row is not using all the width from the parent div (container).
Also I need to make the navbar resizable on smaller screens and when the button appears to show the hidden navbar, after click on it, displays the menu on right side (currently appearing on middle).
I have already tried to use the pl-5 ml-5 classes that bootstrap 4 provides to move the navbar, but it seems these classes don't solve the problem.
I have already checked that adding more content (text, links, li, etc.) inside those rows get bigger.
Current state of the website:
https://demos.posicionart.com/silleri/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
I Just want to move the navbar to the right and make it responsive, since this is the first time that I'm using a navbar like this and not the default one that bootstrap 4 provides.

we can not use same structure everywhere so just replace your above code with the following code
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<ul class="top-navbar">
<li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
<li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
<li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light pb-0">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
and CSS
.top-navbar {
list-style: none;
float: right;
}
.top-navbar li {
float: left;
}

There are many ways you can actually achieve this, I have added a class to the row and add css class as
.mobile-right {
justify-content: flex-end;
}
Here is the codepen link
https://codepen.io/sohebm/pen/MdxYQx
But I would suggest you, understand how Bootstrap grid layout works and responsive utilities

You could use the flex helpers provided by bootstrap especially justify-content-end to align the menu to the right and align-items-end to align the menu to the right in small screens as well as the ml-auto class to align the navbar toggler to the right.
See below :
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Silieri</title>
<meta name="description" content="Prueba Desc">
<meta name="keywords" content="Prueba, Prueba2">
<meta name="author" content="Posicionart">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://demos.posicionart.com/silleri/images/logosilieri.png">
<script src="https://demos.posicionart.com/silleri/js/landing/jquery-3.4.1.min.js"></script>
<script src="https://demos.posicionart.com/silleri/js/landing/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/webfonts/all.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/styles.css">
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-end">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav><section id="welcome">
<div class="jumbotron rounded-0 home-banner"></div>
</section>
<section id="main" class="container">
<div class="container">
<p class="main-title text-center">Podemos amueblar desde una oficina hasta <b class="welcome-title-header">UN CORPORATIVO</b></p>
<hr class="my-5 welcome-hr">
<p class="text-justify mb-5 welcome-message center-justified">
En Sileri nos especializamos en crear ambientes fucionales, cómodos y durables cuyo desarrollo va desde la planeación del proyecto hasta la entrega e instalación del mobiliario.
</p>
<div class="row">
<div class="col-md-4">
<img src="images/landing/banner-home-ambientes.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Ambientes">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Ambientes</h3>
<p class="text-justify welcome-text-card">¿Tienes un proyecto grande en mente? Visita nuestra selección de ambientes para inspirarte. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-catalogo.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Cátalogo">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Catálogo</h3>
<p class="text-justify welcome-text-card">Encuentra piezas que funcionen, combinen y se adapten a tu proyecto y presupuesto. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-asesoria.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Asesorías">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Solicita</b> Asesoría</h3>
<p class="text-justify welcome-text-card">Si no sabes cuándo es el momento ideal para renovar un área de trabajo, toma el test y contáctanos. VER MÁS</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="muebles" class="container">
<div class="container">
<div id="muebles-row" class="row pt-5 mt-5">
<div class="col-md-8 pr-0">
<h1 id="title-muebles" class="upper-letters main-title">Muebles Especiales</h1>
<hr class="muebles-hr">
<div class="container pl-0">
<p class="text-justify">Existen dentro de las empresas áreas que demandan soluciones específicas en cuestión de funcionalidad, diseño y estética; si necesitas una solución integral para tu proyecto, podemos ayudarte.</p>
</div>
<a id="btn-conoce-mas-1" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
<div class="col-md-4 pl-0">
<img src="images/landing/banner-home-muebles-especiales.jpg" class="muebles-image img-fluid" alt="Imagen Sección de Muebles">
<a id="btn-conoce-mas-2" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
</div>
</div>
</section>
<section id="testimonios" class="container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-lg-10">
<img id="imagen-testimonios-1" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
</div>
<div class="col-lg-2">
<div class="vr-testimonios"> </div>
</div>
</div>
</div>
<div class="col-md-8">
<br>
<div class="container">
<h1 id="title-testimonios" class="upper-letters main-title">Testimonios</h1>
<img id="imagen-testimonios-2" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
<blockquote class="blockquote">
<p class="text-justify text-testimonials">Después de trabajar con ellos en el equipamento de nuestro comedor ejecutivo y de las salas de juntas del corporativo, recomiendo apliamente a Silieri Koncept por su experiencia, profesionalismo y entusiasmo en el proyecto.</p>
<b>
<footer class="blockquote-footer">
Director de compras, <cite title="Source Title">AM Consultores</cite>
</footer>
</b>
</blockquote>
</div>
</div>
</div>
</div>
</section><br>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="left">Proyectos</li>
<li class="left">Muebles Especiales</li>
<li class="left">Guía</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="center">Catálogo</li>
<li class="center">Mesas y escritorios</li>
<li class="center">Sillas y sofás</li>
<li class="center">Recepciones</li>
<li class="center">Áreas de Guardado</li>
<li class="center">Escolares y Capacitación</li>
<li class="center">Muros Móviles</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li>Contacto</li>
<li>
<p>
Oficina Matriz <br>
B. Quitana 208 <br>
Col. Carretas <br>
C.P 76050 <br>
Querétaro, Qro. MX.
</p>
</li>
<li>(442) 223 6825</li>
<li>(442) 183 0555</li>
<li>(442) 183 1940</li>
<br>
<li>
<p>
Oficina León <br>
(442) 432 0949
</p>
</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<ul class="footer-icons pb-5">
<li id="li-icons" class="mr-3 ml-3"><i class="fab fa-facebook fa-3x"></i></li>
<li id="li-icons" class="mr-3 ml-3 pb-4"><i class="fab fa-whatsapp fa-3x"></i></li>
</ul>
<ul id="ul-brand" class="mt-4 pt-4">
<li class="upper-letters">Silieri Koncept</li>
<li>
<p>
Muebles de oficina <br>
& proyectos integrales
</p>
</li>
</ul>
</div>
</div>
</div>
<br><br><br><br>
<div class="second-footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<img src="images/landing/silieri-logo-footer.png" class="d-inline-block align-top pt-2 pb-2" alt="Imagen Logo Footer Silieri">
</div>
<div class="col-9 col-md-9">
<p class="text-right mt-4 upper-letters">
2019 &copy Silieri Koncept. Todos los derechos reservados. Consulte nuestro aviso de privacidad
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

How to make fullpage.js fit page with fixed navigation?

My problem is that my fixed bootstrap navigation is covering 60px (the navigation's height) of my page, so it's screwing op the "padding" of the columns I have.
I tried to put margin: 60px on .section, but it just pushes the page 60px down, not resizing the page by 60px. Instead there is 60px hidden at the bottom.
There is no padding-top/bottom defined on the columns. They are defined with display: flex and align-items: center, with a div inside containing the text so it will be centered all time.
https://jsfiddle.net/fmcq9wpn/7/
CSS:
.col-lg-6 {
display: flex;
align-items: center;
.text {
padding: 0 5%;
h3 {
font-weight: bold;
padding-bottom: 10px;
}
p {
line-height: 2.0;
}
}
}
HTML:
<div class="section news">
<div class="row">
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
<div class="col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Mandag 27. Januar, 2019</p>
<H3>COACHING-FOREDRAGSRÆKKE PÅ UNIVERSITET</H3>
<p>Har man lyst til at vide mere om coaching fra forskellige, faglige perspektiver, arrangerer
professor
Reinhardt Stelter en foredragsrække på . . .</p>
<br> <button>Læs mere</button>
</div>
</div>
</div>
<div class="row">
<div class="news-box col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Torsdag 5. Februar, 2019</p>
<h3>SIKKEN FEST!</h3>
<p>Tak til alle gæster, som kom og fejrede det nye års ankomst sammen med os! Det blev en
vidunderlig
fredag . . .</p><br>
<button>Læs mere</button>
</div>
</div>
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
</div>
</div>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Cpenhagen Coaching Center</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-proofer-ignore href="/#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#testimonial">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#signup">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#footer">Footer</a>
</li>
</ul>
</div>
</nav>
It's like the .section will always be the same size as the window.
I have a picture here: https://ibb.co/BgskKSb showing the layout.

Use the fullpage.js option paddingTop.
For example:
new fullpage('#fullpage', {
paddingTop: '60px'
});