How do I "shift" some of the content to the left? [CSS flex]

Question

How do I "shift" some of the content to the left? [CSS flex]

There is such a part of the layout (on the sides of the guides):

I made this up on flex, stuffing everything into a container with a width from rail to rail.

On the layout, we can see that the entire container is somehow shifted to the left, but the right part is still pressed against the guide, plus there is an indent between the image and the text block.

I tried using position relative to move the image / div with the image to the left – it he moved away, but the text remained in place. Here's how it turned out:

If you move the text block with the same property, the width of the text does not increase, since the container has a fixed width. If you set a fixed width for a paragraph, then it turns out to be nothing at all.

Moving the entire block to the left also does not give the desired result.

I feel that everything should be made up in a different way, but I can't understand how. Less than a month of layout doing. Please tell me which way to dig. Thank you in advance.

* {
  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>

0

css position flexbox

Author: Ivan Zhukov, 2020-04-23

Source

1 answers

score 0 · Answer 1

In general, from the screenshot, it is not clear what the blocks below look like and where the idea came from that the image got out of the grid

.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>