Помогите с версткой сайта

HTML:
<div class="events">
<section class="card-1">
<article class="frame-4">
<h3>Сессия мозгового штурма</h3>
<p class="text-1">В самом сердце кипящего инновациями пространства, где мечты превращаются в реальность, – в Центре Инноваций — царит атмосфера креатива и коллаборации.</p>
<p class="text-2">Представьте себе: просторное, залитое светом помещение, где на столах разложены разноцветные стикеры, маркёры и ноутбуки. В воздухе витает аромат свежезаваренного кофе, а по комнате разносятся оживлённые голоса.</p>
<p class="text-3">Здесь, под чутким руководством опытных менторов, амбициозные стартаперы генерируют идеи, которые завтра могут изменить мир.</p>
</article>
<img src="img/event-01.svg" width="610" height="260" alt="люди сидят в кафетерии">
</section>
<section class="card-2">
<article class="frame-5">
<h3>Презентация проекта на встрече в Инкубаторе Стартапов</h3>
<p>Приготовьтесь к погружению в мир амбиций, энтузиазма и инноваций! Вас ждёт захватывающее путешествие в мир стартапов, где идеи превращаются в реальность.</p>
</article>
<img src="img/event-02.svg" width="610" height="260" alt="защита проекта">
</section>

CSS:
.events {
margin: 0 auto;
width: 1366px; /* Ширина блока */
height: 1206px;
background-color: #F0EEFF; /* Цвет блока */
padding: 20px;
Блок пурпурного цвета не хочет начинаться с левого края, на 3 фото как должно все выглядеть, помогите, уже всю голову сломала
}