Centered content but main content and sidebar have there own colors that expanse the screen

Question

I don't know how to articulate this properly so I've attached an image.

The only way I've been able to implement this is with a background image in the body eg: https://www.pro-hyd.co.za/hydraulic-pumps.php

Question: Is there a way to do this using HTML and CSS, without the need for a background image?

Marked as duplicate but no link to the duplicate question? – pentester Oct 05 '18 at 11:01 — pentester, Oct 05 '18 at 11:01

score -1 · Answer 1 · answered Oct 05 '18 at 10:54

You can easily do this with a flexbox.

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

.main {
  background-color: seagreen;
  width: 60%;
  color: white;
}

<div class="wrapper">
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
</div>

1 Answers1