We were asked to design and code a website for high school lesson.

I've designed it in figma and then started coding (more like suffering ahahha) in replit. I designed both the header and the main text to be at the same level in figma., but when i started writing the code, the paragraph text is slightly shifted to the left comparing with the header. I've tried to align them using align items and margings and stuff like that, though i dont fully understand how they work yet tbh. If anyone knows what to do, and is willing to spend a little of their time looking into the code,

i will be very thankful!!!!!!!!!

This is a non-comercial high school homework task.

if you need more details about the project, just ask :)

the css code:

   .logo2{
  padding-left: 65%;}
h2{
 display: flex;
font-family: 'Annie Use Your Telescope', cursive;
font-style: normal;
font-weight: normal;
text-align: center;
font-size: 63px;
color: #000000;
text-shadow: 4px 2px 0.5px #b4deb3, 0 0 1em #b4deb3;
}

.container2 { display: flex; flex-direction: column; padding: 8%;
  }
  .container2 div{
  border: 1px solid greenyellow; padding: 10px;
}
  .image1{display: flex; flex-direction: row; } 
   .imag1, .text1 {flex:50%;}
   .imag1, .imag2, .imag3 {display: flex; justify-content: center; align-items: center;}
  .image2 { display: flex; flex-direction: row;} 
   .imag2, .text2 {flex:50%}
  .image3 { display: flex; flex-direction:row;} 
   .imag3, .text3 {flex:50%}
   .text1, .text2, .text3 {text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); display: flex; align-items: left; justify-content: left; text-align: left; flex-direction: column;}
   
   .but1 {text-align: center; line-height: 1em }

 
.gs {
font-family: Athiti;
font-style: normal;
font-weight: normal;
font-size: 40px;
line-height: 160.5%;
}
.onedayticket {
  padding-left: 15%;
  font-family: Athiti;
font-style: normal;
font-weight: normal;
font-size: 28px;
line-height: 160.5%;

align-items: left;

color: #000000;

text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}

.but1 {filter: drop-shadow(8px 9px 14px rgba(254, 193, 233, 0.71)); width: 286.79px;
height: 70px;
left: 1026px;
top: 2496px;

background: rgba(255, 255, 255, 0.68);
border: 0.5px solid #000000;
box-sizing: border-box;
box-shadow: 0px 4px 4px #B4DEB3;
font-family: Athiti;
font-style: normal;
font-weight: normal;
font-size: 28px;
line-height: 45px;
display: flex;
align-items: center;
text-align: center;
color: #000000;}

the html code:

<section  id="shop">
      <div class = "container">
      <div class ="container2">
        <div >
         <div >
          <img class= "tickets" src="tck/green.png">
         </div>
         <div >
          <header > Green submarine </header>
          <p > The one-day ticket. Lets you expore our music festival for a single day of you choice</p>
          <button > Buy ticket </button>
         </div>
        </div>
        <div >
         <div >
          <img class= "tickets2" src="tck/blue.png">
         </div>
         <div > 
          <header1 > The Eggman </header1>
          <p > The three-day ticket. Enjoy any three days of the festival with this ticket</p>
          <button > Buy ticket </button>
         </div>
        </div>
        <div >
         <div >
          <img class= "tickets3" src="tck/pink.png">
         </div>
         <div > 
          <header1 > The Walrus </header1>
          <p > Expanded VIP ticket.
During our week-long festival all the concerts are open for you at any time. </p>
<button > Buy ticket </button>
         </div>
        </div>
      </div>
      </div>
    </section> 

CodePudding user response：

I'm not sure if this is what you're looking for. Remove padding-left: 15%; on onedayticket because this is pushing the text to the right.