While utilizing the Blueprint CSS framework, I encountered a challenge with removing the margins between columns. Removing these margins caused an issue where a div spanning all columns appeared wider than the combined width of the divs on rows where margins were removed. The problem was more pronounced on rows with multiple columns.
For rows using all 24 columns, I desired all divs' right edges to align. Is there a solution to this problem that doesn't involve complicated Blueprint hacks or manually adjusting container sizes to compensate for the missing margins?
Code snippet in the head section:
<style type="text/css">
.topnav{background-color:blue;}
.logo{background-color:yellow;}
.icons{background-color:orange;}
.search{background-color:red;}
</style>
Code snippet in the body section:
<div class="container">
<div class="span-24 first last top topnav">Top Nav</div>
<div class="span-5 first logo">Logo</div>
<div class="span-3 append-8 icons">Icons</div>
<div class="span-8 last bottom search">Search</div>
</div>