For a specific reason, I have removed the content from the main section here, and it appears that the design is not displaying correctly.
Below is the HTML code for the main section:
<div class="main col">
</div>
The styling of the main-sidebar in CSS looks like this:
.main-sidebar {
/*background: #323232;*/
background: #ffffff;
width: 30%;
margin-left: 2.127659574468%;
color:black;
}
And the CSS for the content area is as follows:
.main {
background: #ffffff;
width:67.8%;
color: #000000;
}
You can observe that both the main-sidebar and the main content area have defined widths in percentages. The calculation for distributing widths is as follows:
67.8% + 30% + Remaining for margin/padding = 100%
So why is it that despite no content in the main section, the design breaks? You can see an example here.
However, when there is content present, the design works seamlessly.