`
/*======================CONTENT========================*/

.content {
  padding: 110px 30px;
  overflow: hidden;
}

.content__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 50px;
  margin: 80px 0 0;
  color: var(--blue-two);
}

.content__title {
  font-size: 59px;
  font-weight: 500;
  color: var(--blue-two);
  text-align: center;
}

.card {
  font-size: 23px;
  line-height: 1.5;
  text-align: left;
  padding: 22.5px;
}

.card:first-child {
  background-color: var(--white-two);
  border-radius: 5px;
}

.card:first-child .card__title {
  color: var(--blue-one);
}

.card__subtitle {
  font-weight: 300;
}

.content__img {
  width: 130%;
  border-radius: 5px;
  margin: auto 0;
}


/*======================TOOLS========================*/

.tools {
  background-color: var(--white-two);
  padding: 110px;
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}

.tools__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 50px;
  margin: 80px 0 0;
  border: 1px solid green;
}

.tools__img {
  width: 100%;
}

.tools__text {
  text-align: left;
}

.tools__title {
  font-size: 49px;
  color: #e56134;
  margin: 0 0 16px;
}

.tools__subtitle {
  font-weight: 300;
  font-size: 23px;
  line-height: 1.5;
  margin: 0 0 32px;
}

.tools__logos {
  margin: 10px 0 0;
}

`

`============CONTENT SECTION===============
<section >
  <div >
    <div >Content management <br> for the whole team</div>
    <div >

      <div >`enter code here`
        <div >
          <div >Collaborate</div>
          <div >Invite your client or team to create and edit content. Set them as Admin, Publisher, or Writer.
          </div>
        </div>
        <div >
          <div >Preview before you publish</div>
          <div >Preview changes before they go live. Then publish with one click whenever you’re ready.
          </div>
        </div>
        <div >
          <div >Smart text editor</div>
          <div >Choose between a visual editor or just plain Markdown. Drag and drop images or even entire text files.
          </div>
        </div>
        <div >
          <div >Powerful content</div>
          <div >Customize your site with document collections, advanced metadata, and custom permalinks.
          </div>
        </div>
      </div>

      <img src="img/content__pic1.jpg" alt="" >

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

============TOOLS SECTION===============
<section >
  <div >
    <div >Develop with tools you <br> already love</div>

    <div >
      <img src="img/tools_pic1.jpg" alt="tools1" >
      <div >
        <div >Built on open source</div>
        <div >Siteleaf is compatible with Jekyll, the static site generator for over half a million websites running on GitHub Pages.
        </div>
        <div >
          Benefit from a large open source community. Use any existing Jekyll theme, or write your own using Liquid, Sass, and CoffeeScript. Develop locally and even offline.
        </div>
        <img src="img/tools__logos.svg" alt="logos" >
      </div>
    </div>
  </div>
</section>

Content section

Tools section

content__pic1.jpg

tools__pic1.jpg

As you can see the Content section(Screenshot below) is as Tools section(Screenshot below) but in reverse, how can I place Tools image as in Content section ? I need the overflow of tools__img1.jpg from left side not from right! How can I do that?

CodePudding user response：

Put this css below into your component's css. The img element in the container align right and overflow from left.

// index.html
<div >
    <img src="your-image.png"/>
</div>

// index.css
.img-container {
    display: flex;
    justify-content: end;
}