对齐 flexbox 中的文本

Question

我们被要求为高中课程设计和编写一个网站。

我在 figma 中设计了它，然后在 replit 中开始编码（更像是受苦啊哈哈）。我将页眉和正文都设计为与页眉相比处于同一级别in figma., but when i started writing the code, the paragraph text is slightly shifted to the left。我已经尝试使用对齐项和边距之类的东西来对齐它们，尽管我还不完全理解它们是如何工作的。如果有人知道该怎么做，并且愿意花一点时间研究代码，

我会非常感激的!!!!!!!!!

这是一个非商业性的高中作业。

如果您需要有关该项目的更多详细信息，请询问:)

css代码：

   .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;}

html代码：

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

Answer 1

我不确定这是否是您要查找的内容。删除 onedayticket 上的 padding-left: 15%;，因为这会将文本推向右侧。

对齐 flexbox 中的文本

Aligning text in a flexbox

html

css

flexbox

alignment