Remove overflow by stretching child div to 100%

Issue

I'm trying to stretch a div to full width in a container, which has a max-width. I found following code:

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

and

.full-width {
  margin-left: calc(-100vw / 2 + 500px / 2);
  margin-right: calc(-100vw / 2 + 500px / 2);
}

from https://css-tricks.com/full-width-containers-limited-width-parents/

on MacOS this works fine. But on Windows (for example using Google Chrome) I got a horizontal scrollbar. I don't want to use overflow-x on the body. How can I fix it?

Solution

Here is the code:

* {
  box-sizing: border-box;
}

img { 
  max-width: 100%; 
}

main {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.full-width {
  width: 100%;
  margin: 0 auto;
}

p, figure {
  margin: 15px 0;
}
figcaption {
  text-align: center;
  color: #999;
}

<main>
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
 
<!--   <div class="cent"> -->
    <figure class='full-width'>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/hero.jpg">
      <figcaption>Some text.</figcaption>
    </figure>
<!--   </div> -->
  
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
  
</main>

Answered By - dinakajoy