I have a section on my website that I want to position in the center of the screen. It's a simple task, but I have a specific design in mind. I want the left side of the section to have an orange background, while the right side should be white. I've come up with the following solution:
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
And here is the CSS:
#container {
width: 100%;
display: flex;
}
#left {
flex: 1;
background-color: orange;
}
#right {
flex: 1;
background-color: white;
}
Everything works perfectly, except I'm struggling with centering the content within the #left and #right sections. Does anyone know how I can adjust the padding or margins to achieve the desired layout?