0

I'm trying to make a div with a width of 100vw to cover all viewing areas, however, it comes in a div with a margin, so I'm having trouble.

I've also included an image link below to help you understand. To further comprehend, consider the following image.

picture for the entire page 

* {
    margin: 0%;
    padding: 0%;
}

body {
    background: black;
    margin: 2rem 6rem;
    color: white;
}

/* About Section  */

.about {
    display: block;
    background-color: #2e3038;
    margin-left: -6rem;
    margin-right: 6rem;
}
<body>
  <div class="about">
    <div id="col1">
      <h3>A co-founder at one of the world's largest communities.
      </h3>
      <p>

        The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
        of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
      </p>
    </div>
    <div id="col2">
      <p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
        the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
    </div>
  </div>
</body>

As you can see, I attempted to use margin-right, however, it would not work.

I can't use inspect element since the design I'm attempting to replicate is in png format.

Mukul
  • 37
  • 6
  • I don't see margin but rather padding inside each section – Temani Afif Feb 09 '22 at 15:30
  • Why are you applying margin to the `body`? That's usually the first thing that is removed – Paulie_D Feb 09 '22 at 15:31
  • I've included a second image of the complete page so you can see why I included a margin in the body. – Mukul Feb 09 '22 at 15:46
  • Well that's not really the way it's usually done. Add elements with the margins you want and leave the body alone. If you want a wider div change the margins – Paulie_D Feb 09 '22 at 16:10
  • 1
    Alternatively, use a proper container for your central items and then https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 – Paulie_D Feb 09 '22 at 16:13
  • So you're saying that instead of adding margin to the body, I should apply margin to each div individually? am I correct? – Mukul Feb 09 '22 at 16:14
  • 1
    or use a container with those margins. – Paulie_D Feb 09 '22 at 16:20

1 Answers1

1

You're close - you've just specified the wrong direction for margin-right:

* {
    margin: 0%;
    padding: 0%;
}

body {
    background: black;
    margin: 2rem 6rem;
    color: white;
}

.about {
    background-color: #2e3038;
    margin-left: -6rem;
    margin-right: -6rem;
}
<body>
  <div class="about">
    <div id="col1">
      <h3>A co-founder at one of the world's largest communities.
      </h3>
      <p>

        The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
        of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
      </p>
    </div>
    <div id="col2">
      <p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
        the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
    </div>
  </div>
</body>

Full Width Containers in Limited Width Parents | CSS-Tricks

Richard Deeming
  • 29,830
  • 10
  • 79
  • 151