Let's analyze the components of this issue.
The .about block spans the full width of the page, but its content is floated, causing a disruption in the layout. Upon inspecting the DOM nodes using your browser's developer tools, you'll notice that the height of the .about div is zero pixels, resulting in content overflowing outside the boundaries due to the floating element.
This leads to a zero-height div at the top of the page followed by a title with a red background below it. When an element has zero height and something lies below it, the latter also appears at the top of the page.
To address this issue, you can add a clearfix to the about section:
.about::after { /* Updated Code */
content: '';
display: table;
clear: both;
}
/*******************************/
/********** About CSS **********/
/*******************************/
.about {
position: relative;
width: 100%;
}
.about .container {
width: 50%;
float: right;
padding: 70px 30px 0px 30px;
}
... [Truncated for brevity] ...
Okay, now we've moved past the top section, but the title in the service section is still not positioned beneath other content because of the .t-container being floated to the right.
A simple fix would be to apply the same styles from .t-container to the title element, resolving the issue (even though you may need to adjust padding as needed).
.about::after { /* Updated Code */
content: '';
display: table;
clear: both;
}
.service .title {
float: right;
width: 50%;
padding: 10px 30px 40px 30px;
}
... [Truncated for brevity] ...
A more optimal solution would involve reviewing your CSS approach. Consider using display: flex on the about section instead of floats to handle the zero-height issue. You can then remove floats in the service section and utilize margin-left: auto to align elements to the right while preserving document flow.
After making these adjustments, you may need to fine-tune individual spacings to achieve the desired layout.
/*******************************/
/********** About CSS **********/
/*******************************/
.about {
position: relative;
width: 100%;
display: flex;
flex-direction: row-reverse;
}
... [Truncated for brevity] ...