I'm facing a challenge with a seemingly simple layout issue that has me puzzled.
My goal is to have two divs on a webpage - one for the heading with a maximum width of 500px, and another for the main content with a maximum width of 400px. The twist is that I want the main div to be horizontally centered in the browser window, with its left edge aligning perfectly with the left edge of the heading div as illustrated below. This positioning requires the use of a wrapper div with extra padding on the left side to achieve the desired effect:
https://i.sstatic.net/kNse5.png
However, my current solution, which involves setting extra padding inside the wrapper div, works well until the screen size decreases. At smaller sizes, the layout loses its center alignment due to the excess padding.
So, how can I create this layout without compromising center alignment at different screen sizes? Is Flexbox the answer?
Below is the code I've been working with so far: https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}