Выровнять текст слева над (относительно) div

Question

У меня есть некоторый текст h2, который в настоящее время выровнен по левому краю в мобильном представлении, выше центрированного div. Как я могу вместо этого выровнять его по левому краю относительно div в мобильном представлении (с примененным медиа-запросом в CSS ниже)?

CodePen

Соответствующий HTML:

<section class="container-projects">
        <h2 class="portfolio-header">Featured Work</h2>
        <div class="project"> 

Соответствующий CSS:

    .portfolio-header {
      /* Puts header in its own row without removing from container with row flex direction (setting parent container to wrap also required) */
      width: 100%;
      text-align: left;
      color: #7d97ad;
    }

    .container-projects {
      display: flex;
      /* Parent container needs this for flex-item to take full width in row */
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      margin: 2em 0;
    }

/* Special styling for screens up to 767px wide, inclusive (applies to landscape phones) */
@media screen and (max-width: 767px) {
  header, .container, footer {
    max-width: 100%;
  }

  /* Must specify max-width for img even though parent .container has the same declaration because max-width isn't inherited */
  .container img {
    max-width: 100%;
  }

  .project {
    /* Centers projects (aligned left otherwise) */
    margin: 0 auto;
  }

}

Answer 1

https://codepen.io/anon/pen/OZjWwJ?editors=1100

Слегка измененный HTML

<section class="portfolio">
  <h2 class="portfolio-header">Featured Work</h2>
  <div class="container-projects">
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/hv4c8n/santorini_small.jpg" alt="View from island of Santorini on a sunny day">
      <h3>Project No. 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/c9sKM7/coast_small.jpg" alt="Distant view of a rugged island with a sailboat nearby">
      <h3>Project No. 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/eO9oES/mediterranean_small.jpg" alt="Bird's eye view of a rocky beach with clear turquoise waters">
      <h3>Project No. 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</section>

и CSS

.portfolio {
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .portfolio {
    width: 90%;
  }
}

Таким образом, вы упаковываете изображения h2 и проекта в один контейнер, что делает более логичным управление их полями на экране. margin: 0 auto выравнивает контейнер по центру экрана, что желательно для всех значений ширины экрана.

Медиа-запрос 992px поступает из стандартизированной системы сетки Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Answer 2

Вы можете добавить медиа-запрос для мобильного телефона

@media screen and (max-width: 600px) {
    .portfolio-header {
        width: 300px;
        margin: 10px auto;
    }
}