So I am coding a website and I have three divs side by side. Now I want to add text underneath these three divs and they just go on the right side of them. I don't know if it is because of float or something. Please help me figure out why this is happening.
HTML:
<div class="wed">
<span style="color: #5a5a5a; font-size: 30px;">
<h2>What Do We Provide</h2>
<div class="spacer"></div>
</span>
<div class="img-three">
<div class="img-left">
<img src="../img/rocket.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
<h3>Lightning Speed</h3>
<p>We make your custom software at <b>lightning</b> fast speeds. We <b>always meet your expectations.</b></p>
</div>
<div class="img-left">
<img src="../img/key.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
<h3>DDos Protection</h3>
<p><b>We block almost every ddos attact</b> to your software as possible. It is very hard to protect all of them.</p>
</div>
<div class="img-left">
<img src="../img/disk.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
<h3>Hosting</h3>
<p>We host your software if needed. This is not free, but we do give the option.</p>
</div>
</div>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="order-now">
<h2>What are you waiting for?</h2>
<div class="spacer"></div>
<a href="#order" class="btn btn-red">Order Now!</a>
</div>
Css Code:
.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
position: absolute;
float: left;
}
.img-three{
width: 100%;
margin: 0 auto;
}
.img-left{
margin-left: 10%;
float: left;
width: 20%;
margin-bottom: 10px;
}
.img-left p{
font-size: 15px;
color: #444;
}
.img-left h3{
font-size: 20px;
color: #444;
font-weight: bolder;
}
.order-now{
width: 100%;
margin: 0 auto;
position: absolute;
}
Aucun commentaire:
Enregistrer un commentaire