Website Output
https://i.sstatic.net/5JVyg.jpg
I've been working on a small website with a bootstrap carousel, and in this specific section of the program, the Bootstrap and HTML/CSS elements overlap by default. I'm not sure how to separate them. The code is attached below, and I've also provided a live output here on CodePen.
HTML Code
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="slider">
<div class="centering_the_slider_contents">
<!-- Nut 1-->
<div class="carousel-item active">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 1 Ends-->
<!-- Nut 2-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 2</h2>
<h3 class="rich_in"&§gt;Rich In§/h3§>
§<p§>§
§Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
§&£€/div>
&´Ø/div))&))}{0; Ø}Ä*==Ö@ê ="><point size=""></point</pre>;
Cascading Style Sheets (CSS)
.centering_the_slider_contents {
margin: auto;
width: 100%;
text-align: center;
margin-top: 10px;
position: absolute;
}
.images_in_nuts {
border-radius: 50%;
width: 250px;
height: 250px;
display: inline-block;
}
.nut_text {
display: inline-block;
vertical-align: top;
margin-top: 30px;
}
.last_contact_us {
background: #ffffff !important;
// margin-top: 300px;
}
.footer_contact_us {
margin-top: 10px;
text-align: center;
font-size: 25px;
font-family: "Poppins";
font-weight: bold;
}
.footer_contact_us_expl {
text-align: center;
font-family: "Poppins";
}
If a margin value of 300px is given then they get aligned. Is that the right way to do it? Is there a solution to align these contents one below another without giving a fixed margin? Please share if you have a solution for this issue. Thanks!