Как можно сверстать описание картинок, помогите с макетом

Question

Я совсем новичок, пока все пробую и многое не получается. Хотел сверстать такой учебный макет (посмотрите картинку)все вроде получилось кроме описании картинок, как только вставляю и все разваливаеться. В чем дело как можно сверстать описание картинок, может другим методом или я теги неправильно вставляю в друг друга? Помогите пожалуйста. Что не нравится: у картинок не удалось уменьшить маргины и заголовок latest projects ушел куда то в лево.

.container {
    width: 970px;
    padding:0 28px;
    margin:0 auto;
    display: flex;
}

.skills {
    width: 432px;
}

.skills-direction, .news-projets {
    font-size: 23px;
    line-height: 0.96;
}


.skills-discrib {
    font-size: 13px;
    line-height: 1.69;
    text-align: justify;
    color: #585555;
}


.projects {
    margin-left:46px;
    width: 502px;
}

.flex {
    display: flex;
}

figcaption {    
    font-size: 13px;
    font-weight: 300;
    line-height: 1.69;      
    color: #5b5b5b;
      }

<body>
<div class="container">
    <section class="skills">
      <h2 class="skills-direction">Web Design & Development</h2>
      <p class="skills-discrib">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to         make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
        in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </section>
    <section class="projects">
      <h2 class="news-projets">Latest projects</h2>
      <div class="flex">
    
      <figure>
        <img src="https://i.postimg.cc/0NjqPr99/Yacht.jpg" alt="">
        <figcaption>Project: Yacht rentel</figcaption>
      </figure>
     
     
      <figure>
          <img src="https://i.postimg.cc/C56TXgfc/cap.jpg" alt="">
          <figcaption>Project : Mob Apps</figcaption>
      </figure>
        
      <figure>
          <img src="https://i.postimg.cc/wBmsfqnj/iphone4.jpg" alt="">
          <figcaption>Project : Dental Cap</figcaption>
      </figure>
    </div>
      
    </section>
</div>
 </body>

Answer 1

Добавь вот эту строчку к css файлу

.flex figure:first-child {
    margin-left: 0;
}

Answer 2

Чтобы не появлялись такие неожиданности, или надо помнить, что у элементов по умолчанию есть margin-ы && padding-и или сделать себе привычкой начинать верстку со строк

*{
  padding:0;
  margin:0;
}

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 970px;
  padding: 0 28px;
  margin: 0 auto;
  display: flex;
}

.skills {
  width: 432px;
}

.skills-direction,
.news-projets {
  font-size: 23px;
  line-height: 0.96;
}

.skills-discrib {
  font-size: 13px;
  line-height: 1.69;
  text-align: justify;
  color: #585555;
}

.projects {
  margin-left: 46px;
  width: 502px;
}

.flex {
  display: flex;
}

figcaption {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.69;
  color: #5b5b5b;
}

<body>
  <div class="container">
    <section class="skills">
      <h2 class="skills-direction">Web Design & Development</h2>
      <p class="skills-discrib">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </section>
    <section class="projects">
      <h2 class="news-projets">Latest projects</h2>
      <div class="flex">

        <figure>
          <img src="https://i.postimg.cc/0NjqPr99/Yacht.jpg" alt="">
          <figcaption>Project: Yacht rentel</figcaption>
        </figure>


        <figure>
          <img src="https://i.postimg.cc/C56TXgfc/cap.jpg" alt="">
          <figcaption>Project : Mob Apps</figcaption>
        </figure>

        <figure>
          <img src="https://i.postimg.cc/wBmsfqnj/iphone4.jpg" alt="">
          <figcaption>Project : Dental Cap</figcaption>
        </figure>
      </div>

    </section>
  </div>
</body>

БЛОГ НА HUSL

Как можно сверстать описание картинок, помогите с макетом

Ответы (2 шт):