https://i.sstatic.net/VHahe.jpg
As a novice student in the world of coding with html and css, I have embarked on a project to create a website. However, I've encountered a minor issue...
I'm looking to adjust the width of these boxes so they align neatly next to each other rather than appearing misaligned. Any suggestions or solutions? Here's the code snippet:
.superbutton{
opacity: 100;
display: flex;
padding: 10px 30px;
color: #294f65;
background-color: transparent;
border: 2px solid #294f65;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .1rem;
transition: .6s ease background-color;
z-index: +99;
transition: .5s;
margin-bottom: 40px;
margin-top: 1px;
transform: translate(0,0%);
position: relative;
text-decoration: none;
}
.superbutton:hover{
color: white;
background-color: #294f65;
padding: 15px 35px;
transition: 0.5s;
}
.super{
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
.superbutton:active{
color: white;
background-color: #294f65;
padding: 12px 32px;
transition: 0.1s;
}
#tickets {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
#ticketstop .sectiontitle h1{
font-size: 2rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
.sectiontitle span{
color: #347f7d;
}
#tickets .sectiontitle{
font-size: 2rem;
font-weight: 300;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
#tickets .sectiontitle span{
color: #347f7d;
}
#tickets p {
text-align: justify;
}
#tickets .ticketsbottom{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
transform: translate(0,-30%);
}
#tickets .ticketsitem {
flex-basis: 15%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
border-radius: 10px;
background-image: url(./ticket.jpg);
background-size: cover;
margin: 5px 1%;
position: relative;
z-index: +1;
transition: .2s;
}
#tickets .ticketsitem::after{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
opacity: .8;
z-index: -1;
border-radius: 10px;
}
#tickets .ticketsbottom .icon{
height: 80px;
width: 20px;
margin-bottom: 25px;
}
#tickets .ticketsbottom .icon img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
}
#tickets .ticketsitem h2{
font-size: 2rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#tickets .ticketsitem p{
color: white;
text-align: left;
font-size: 1.4rem;
line-height: 1.9rem;
white-space: nowrap;
}
#tickets .ticketsitem:hover{
position: relative;
padding: 20px;
transition: 0.2s;
}
/* END TICKETS Section */
/*above tickets*/
.abovepic{
text-align: center;
transform: translate(0,-35%);
}
/*below tickets*/<section id="tickets">
<div id="tickets container">
<div class="ticketsbottom">
<div class="ticketsitem">
<div class="icon">
<img src="helios.png"/>
</div>
<h2>HELIOS</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
<div class="ticketsitem">
<div class="icon">
<img src="hot1.png"/>
</div>
<h2>COAL</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
<div class="ticketsitem">
<div class="icon">
<img src="remix.png"/>
</div>
<h2>REMIX</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
</div>
</div>
</section>