Почему его косоебит

xiaoxiaoxiao_inactive7499375, привет! Я вижу, что тебя косоебит HTML, CSS и JavaScript. Чем я могу тебе помочь?

 

Как строчки кода написаны, так и отображается

 

Сделай ему обертку, у тебя флексами стоит выравнивание по центру и оно каждый элемент отдельно выравнивает

<style>
.littlehead-how-we-work {
font-size: 24px;
color: #333333;
font-weight: 700;
padding-bottom: 15px;
}

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333333;
display: flex;
justify-content: center;
align-items: center;
margin-right: 45px;
}

.number {
font-size: 20px;
color: white;
}
.how-we-work {
display: flex;
flex-direction: column;
align-items: center;
}
.item-how-we-work {
display: flex;
align-items: center;
padding-bottom: 25px;
width: 880px;
}
.item-how-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
width: 1000px;
align-items: center;
}
.text-how-we-work {
font-size: 20px;
color: #333333;
font-weight: 500;
}
</style>

CSS

<style>

      .littlehead-how-we-work {

        font-size: 24px;

        color: #333333;

        font-weight: 700;

        padding-bottom: 15px;

      }



      .circle {

        width: 50px;

        height: 50px;

        border-radius: 50%;

        background-color: #333333;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-right: 45px;

      }



      .number {

        font-size: 20px;

        color: white;

      }

      .how-we-work {

        display: flex;

        flex-direction: column;

        align-items: center;

      }

      .item-how-we-work {

        display: flex;

        align-items: center;

        padding-bottom: 25px;

        width: 880px;

      }

      .item-how-wrapper {

        display: flex;

        flex-direction: column;

        justify-content: center;

        width: 1000px;

        align-items: center;

      }

      .text-how-we-work {

        font-size: 20px;

        color: #333333;

        font-weight: 500;

      }

    </style>

<div class="how-we-work">
<h1 class="head-how-we-work">Как мы работаем?</h1>

<div class="item-how-wrapper">
<div class="item-how-we-work">
<div class="leftside-item">
<div class="circle">
<span class="number">1</span>
</div>
</div>
<div class="rightside-item">
<h1 class="littlehead-how-we-work">Контакт</h1>
<p class="text-how-we-work">
Вы можете связаться с нами по телефону или через электронную
почту.
</p>
</div>
</div>

<div class="item-how-we-work">
<div class="leftside-item">
<div class="circle">
<span class="number">2</span>
</div>
</div>
<div class="rightside-item">
<h1 class="littlehead-how-we-work">Дизайн и сроки поставки</h1>
<p class="text-how-we-work">
После обсуждения требований, мы сможем приступить к разработке
дизайна вашего заказа.
</p>
</div>
</div>

<div class="item-how-we-work">
<div class="leftside-item">
<div class="circle">
<span class="number">3</span>
</div>
</div>
<div class="rightside-item">
<h1 class="littlehead-how-we-work">Договор</h1>
<p class="text-how-we-work">
После утверждения дизайна и согласования сроков выполнения, мы
предоставим вам договор.
</p>
</div>
</div>

<div class="item-how-we-work">
<div class="leftside-item">
<div class="circle">
<span class="number">4</span>
</div>
</div>
<div class="rightside-item">
<h1 class="littlehead-how-we-work">Доставка</h1>
<p class="text-how-we-work">
Если вам требуется доставка готового заказа, мы можем предоставить
такую услугу.
</p>
</div>
</div>
</div>
</div>

HTML

<div class="how-we-work">

      <h1 class="head-how-we-work">Как мы работаем?</h1>



      <div class="item-how-wrapper">

        <div class="item-how-we-work">

          <div class="leftside-item">

            <div class="circle">

              <span class="number">1</span>

            </div>

          </div>

          <div class="rightside-item">

            <h1 class="littlehead-how-we-work">Контакт</h1>

            <p class="text-how-we-work">

              Вы можете связаться с нами по телефону или через электронную

              почту.

            </p>

          </div>

        </div>



        <div class="item-how-we-work">

          <div class="leftside-item">

            <div class="circle">

              <span class="number">2</span>

            </div>

          </div>

          <div class="rightside-item">

            <h1 class="littlehead-how-we-work">Дизайн и сроки поставки</h1>

            <p class="text-how-we-work">

              После обсуждения требований, мы сможем приступить к разработке

              дизайна вашего заказа.

            </p>

          </div>

        </div>



        <div class="item-how-we-work">

          <div class="leftside-item">

            <div class="circle">

              <span class="number">3</span>

            </div>

          </div>

          <div class="rightside-item">

            <h1 class="littlehead-how-we-work">Договор</h1>

            <p class="text-how-we-work">

              После утверждения дизайна и согласования сроков выполнения, мы

              предоставим вам договор.

            </p>

          </div>

        </div>



        <div class="item-how-we-work">

          <div class="leftside-item">

            <div class="circle">

              <span class="number">4</span>

            </div>

          </div>

          <div class="rightside-item">

            <h1 class="littlehead-how-we-work">Доставка</h1>

            <p class="text-how-we-work">

              Если вам требуется доставка готового заказа, мы можем предоставить

              такую услугу.

            </p>

          </div>

        </div>

      </div>

    </div>

 

Поменяй заголовок на див класс