How to shift the image to the right and avoid horizontal scrolling?

enter image description here

An example of a trick that found

enter image description here

I use Bootstrap 4 and am glad to any examples

  • The overflow property is responsible for scrolling, set it to the tag above, or to the body . Why actually shift it, can you just cut the picture itself? - Bert
  • overflow: hidden - Stranger in the Q
  • I do not want to clean up the scroll. The picture is large and for example on different devices it should open with a different offset. Seen on many sites and looking for examples. - Anton Bogomolov
  • Example jivosite.ru/features - Anton Bogomolov

1 answer 1

Maybe so? There is an option to ban only horizontal scrolling.

 * { margin: 0; padding: 0; box-sizing: border-box; } body { color: #777; font-size: 16px; } .container { width: 90%; margin: 0 auto; padding: 5%; background: #444; overflow-x: hidden; } article { width: 90%; background: #111; padding: 5%; margin: 40px auto; position: relative; } article h2 { font-size: 54px; line-height: 60px; } article p { margin: 30px 0; } .moved { left: 50%; } 
 <section class="container"> <article class="normal"> <h2>Просто блок</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ab voluptates ullam est quis nam distinctio repudiandae atque, iusto nulla eaque provident! </p> </article> <article class="moved"> <h2>Сдвинутый блок</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quis. Eos commodi odio molestias. </p> </article> </section>