div position problem i want this hello text under the pricing section - html

Question

div position problem i want this hello text under the pricing section`
please help me to solve this problem
i am using different div but it still show me same result
div position problem i want this hello text under the pricing sectiondiv position problem i want this hello text under the pricing section div position problem i want this hello text under the pricing section
#import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght#100&family=Poppins:wght#300;400;500;600&family=Roboto:wght#300&family=Silkscreen&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
body {
background: #161c41;
}
.gallery {
position: relative;
float: left;
/* display: flex; */
}
.cardBx {
width: 100%;
/* min-height: 100%; */
/* display: flex; */
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
float: left;
}
.cardBx .card {
width: 280px;
border-radius: 10px;
margin: 20px 40px;
background: #1b2141;
overflow: hidden;
}
.cardBx .card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.cardBx .card .content {
padding: 10px;
}
.cardBx .card .content h4 {
color: white;
margin: 15px 0;
}
.cardBx .card .progress-line {
position: relative;
height: 10px;
width: 100%;
background-color: #35407e;
margin-bottom: 15px;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.cardBx .card .progress-line span {
position: absolute;
height: 100%;
width: 80%;
border-radius: 10px;
background: #1aeeef;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.cardBx .card .info {
border-top: 2px solid #35407e;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cardBx .card .info p {
font-size: 1em;
color: white;
}
.cardBx .card .info p span {
color: #1aeeef;
}
.cardBx .card .content .info a {
display: inline-block;
padding: 10px 20px;
margin: 20px 0;
border: 1px solid #1aeeef;
text-decoration: none;
font-weight: 700;
border-radius: 5px;
color: white;
letter-spacing: 1px;
}
.cardBx .card .content .info a:hover {
background: #1aeeef;
border: none;
color: #050e2d;
box-shadow: 0 0 10px #1aeeef;
}
.cardBx {
display: flex;
justify-content: center;
align-items: center;
}
/* ////nav */
nav {
display: flex;
align-items: center;
justify-content: space-between;
background: #05123d;
height: 70px;
text-decoration: none;
}
.logo {
width: 160px;
margin-right: 45px;
margin-left: 10px;
}
.nav-left {
display: flex;
align-items: center;
}
.nav-left ul li {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
cursor: pointer;
list-style: none;
margin-left: 70px;
text-decoration: none;
display: inline-block;
}
.nav-left ul li a {
color: rgb(255, 255, 255);
font-size: 25px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
text-decoration: none;
padding: 1rem;
}
/* ===========hjbhedbfj======== */
/* html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
} */
img {
max-width: 100%;
}
.slider-container {
height: 600px;
width: 100%;
border-top: 2px solid #1aeeef;
border-bottom: 2px solid #1aeeef;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 0.2em 1em;
&:hover {
background: red;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide-1 {
background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}
.slide-2 {
background-image: url("https://freefiremobile-a.akamaihd.net/common/web_event/official2.ff.garena.all/img/20228/29bfa3738921a9e9d096f5c4cdfaf297.jpg");
}
.slide-3 {
background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}
/* ==========footer========== */
.bddiv {
display: inline-block;
vertical-align: middle;
color: #1aeeef;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap");
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css link -->
<link rel="stylesheet" href="./shop.css" />
<!-- <link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
/> -->
<title>Shop</title>
</head>
<body>
<nav>
<div class="nav-left">
<img src="./ggh.svg" class="logo" />
<ul>
<li>Home</li>
<li><a>Turnament</a></li>
<li><a>News</a></li>
<li class="shopname"><a>Shop</a></li>
<li><a>About us</a></li>
</ul>
</nav>
<main>
<?php
include './slider/slider.php' ?>
<?php
include 'shopdb.php';
$sql="SELECT * from shop_table";
$query=mysqli_query($conn,$sql);
while($info=mysqli_fetch_array($query)){
?>
<div class="gallery">
<div class="cardBx">
<div class="card" data-item="pc">
<img src="shop/<?php echo $info['imageup']; ?>" alt="loding">
<div class="content">
<h4><?php echo $info['gamename']; ?></h4>
<div class="progress-line"><span></span>
</div>
<div class="info">
<p>pricing<br /><span> <?php echo $info['price']; ?></span></p>
Buy Now
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
<div class="bddiv"> hello</div>
</main>
</body>
</html>
`

Answer 1

the float made this problem if you want to put your price section in the right , remove float and use this code:
.gallery {
position: relative;
}
.cardBx {
width: 100%;
justify-content: start;
align-items: center;
}

Answer 2

Please Try This
Just add clear:both as style in <div> containing "Hello" text
<div class="bddiv" style="clear:both;"> hello</div>

Answer 3

I just increase the padding-top and padding-left and it works fine, Here's the code of the CSS I changed.
.bddiv {
padding-top: 230px;
padding-left: 60px;
color: #1aeeef;
}
Just change the bddiv CSS. The Html code is working good