On my website, I have a specific section where I want to showcase four products with arrows on both sides for navigation. However, I am facing an issue with the positioning of the elements. Can someone take a look and help me figure it out? Check out this image for reference.
Additionally, there's also an issue with the background color not filling the space properly around the items and buttons. Any insights on why this is happening?
Edit: See how I envision the layout to look like in this picture.
HTML:
<section class="one">
<div><span class="title">New products</span></div>
<br>
<button class="left">
<span class="Lmain"></span>
<span class="Lside"></span>
</button>
<div class="items">
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
</div>
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
</section>
CSS:
.title {
text-align: center;
position: absolute;
margin: auto;
border: 1px solid goldenrod;
font-size: 40px;
}
.one {
background-color: hotpink;
position: relative;
}
.two {
background-color: rgb(255, 0, 128);
}
/*items appearance*/
.items {
position: relative;
margin: auto;
}
.item {
border: 1px solid rgb(255, 170, 0);
float: left;
position: absolute;
top: 0px;
margin: 0px 8px;
left: 12%;
width: 350px;
height: auto;
}
.itemImg {
width: 100%;
height: auto;
}
/*end of item appearance*/
.right {
right: 0px;
top: 0px;
position: absolute;
}
.left {
left: 0px;
top: 0px;
position: absolute;
}