Hey there, I'm relatively new to the world of HTML and CSS. I have a question about using sections to display images on my website. I've noticed that when I use a div element in my HTML code, everything looks great. However, if I try to only use the section element instead, things start to look strange. Can anyone help me figure out how to make my HTML work with just the section element and not the div? Here is the CSS code I am working with:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
color: orange;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
}
.section p {
color: black;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
padding-bottom: 2em;
}
Here is an example of my HTML code:
<div id="content2">
<h4>Our Products</h4>
<section class="section">
<a href="../html/clothing.html#Pika"> Pika Blanket</a>
<a href="../html/clothing.html#Pika"><img src="../images/NB1.jpg" /></a>
<p>$19.99</p>
</section>
<section class="section">
<a href="../html/clothing.html#City">City Boy</a>
<a href="../html/clothing.html#City"><img src="../images/toddler1.jpg" /></a>
<p>$249.99</p>
</section>
<section class="section">
<a href="../html/clothing.html#Classy">Classy Girl</a>
<a href="../html/clothing.html#Classy"><img src="../images/toddler9.jpg" /></a>
<p>$244.99</p>
</section>
<section class="section">
<a href="../html/clothing.html#Outdoors">Outdoors</a>
<a href="../html/clothing.html#Outdoors"><img src="../images/girl1.jpg" /></a>
<p>$129.99</p>
</section>
</div>
Any assistance would be greatly appreciated!