Как "сдвинуть" часть контента влево? [ CSS flex]

Question

Имеется вот такая часть макета (по бокам направляющие):

Я сверстал это на флексах, запихнув всё в контейнер с шириной от направляющей до направляющей.

На макете мы видим что весь контейнер как-бы сдвинут влево, но правая часть всё равно прижата к направляющей, плюс между изображением и блоком текста есть отступ.

Я попытался с помощью position relative отодвинуть изображение / див с изображением влево – он отодвинулся, но текст остался стоять на месте. Вот как вышло:

Если двигать этим же свойством блок с текстом, то ширина текста не увеличивается, так как у контейнера фиксированная ширина. Если ставить фиксированную ширину еще и параграфу, то вообще ерунда какая-то получается.

Двигать весь блок влево - тоже не дает нужного результата.

Чувствую что вообще по другому всё следует верстать, но не могу понять как. Меньше месяца вёрсткой занимаюсь. Подскажите пожалуйста, в какую сторону копать. Благодарю заранее.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none; }

.container {
  max-width: 1170px;
  margin: 0px auto; }
  
  
.what-we-do__content {
  border: 1px solid red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 116px 0; }
  .what-we-do__content img {
    width: 610px;
    position: relative;
    left: -150px; }
  .what-we-do__content p {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.9px;
    margin-bottom: 45px;
    max-width: 700px;
    text-align: justify; }
  .what-we-do__content .button {
    background-color: #4b4b4d; }
    .what-we-do__content .button:hover {
      background-color: #6e6e71; }


h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 25px; }
  .what-we-do__content h2 {
    letter-spacing: 1.8px;
    line-height: 39.92px; }

<div class="what-we-do container">
			<div class="what-we-do__content">
				<div class="what-we-do__content__img">
					<img src="../img/what-we-do.jpg" alt="">
				</div>
				<div class="what-we-do__content__text">
					<h2>What We do?</h2>
					<p>Small businesses and individuals in Teton County, Wyoming wanting the best of breed technology and information security services. I work with each customer to determine their needs and integrate multiple platforms to create a custom solution. </p>
					<a href="" class="button">Learn More</a>
				</div>
			</div>

Answer 1

Вообще по снимку экрана не ясно как выглядят блоки ниже и откуда появилось представление что картинка вылезла за сетку

.items {
  display: flex;
  align-items: center;
  max-width: 768px;
  margin: auto;
}

.item {
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item p {
  display: block;
  margin: 20px 0;
  font-size: 14px;
}

.btn {
  text-decoration: none;
  color: #fff;
  padding: 6px 14px;
  background: #000;
  border-radius: 20px;
  font-size: 14px;
}

<div class="items">
  <div class="item">
    <svg viewBox="0 0 348 341" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="cp">
        <path d="M38,172 C38,172 42,78 178,55 C178,55 300,40 300,182 C300,182 318,320 167,284 C167,284 50,263 38,172z" id="path"/>
        </clipPath>
        </defs>
       <use href="#path" x="14" fill="#e4c66c"/>
       <image width="100%" height="100%" href="https://breakingtech.it/wp-content/uploads/2016/11/cpu-wall.jpg" image-rendering="optimizeSpeed" clip-path="url(#cp)" preserveAspectRatio="none"/>
    </svg>
  </div>
  <div class="item">
    <div class="item-outer">
      <h3>What we do?</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque id voluptate voluptates laudantium laborum rerum dolore maxime veritatis recusandae aliquam!</p>
      <a href="#" class="btn">learn more</a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как "сдвинуть" часть контента влево? [ CSS flex]

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