I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen resolution.
However, I am facing an issue with centering content within each section. I have content that is 800px wide, and I want it to be horizontally centered within each colored section. Despite my efforts, I can't seem to get it right. Can anyone help me identify what I'm doing wrong based on the code below?
<div style="background-color:white;">
<div style="text-align:center;">
Welcome!
</div>
</div>
<div style="background-color:silver;">
<div style="text-align:center;">
Navigation
</div>
</div>
<div style="background-color:black;">
<div style="text-align:center;">
Some Text
</div>
</div>