Take a look at the HTML code snippet I'm currently working on...
<div id="projects">
<H1 class="projects">PROJECTS</H1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button class="leftbtn"></button>
<button class="rightbtn"></button>
</div>
Additionally, here is the corresponding CSS...
#projects {
width: 1280px;
height: 400px;
background-color: #306e73;
margin-top: 100px;
clear: both;
position: relative;
text-align: center;
}
.projects {
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: #ffffff;
float: center;
}
.box {
width: 230px;
height: 230px;
background-color: #848181;
display: inline-block;
margin-left: 40px;
margin-right: 40px;
margin-top: 25px;
}
.leftbtn {
position: relative;
float: left;
width: 60px;
height: 60px;
margin-left: 25px;
margin-top: -150px;
border-radius: 100px;
}
.leftbtn:before {
content: "\f137";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #ff5335;
font-size: 70px;
position: relative;
margin-left: -8px;
}
.rightbtn {
position: relative;
float: right;
width: 60px;
height: 60px;
margin-right: 25px;
margin-top: -150px;
border-radius: 100px;
}
.rightbtn:before {
content: "\f138";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #ff5335;
font-size: 70px;
position: relative;
margin-left: -8px;
}
I've encountered an issue where the left and right buttons are not aligned correctly with the icons. I've been struggling to find a solution, any help would be greatly appreciated before I lose my mind! :)