Hi,
Layout inquiries are 100% custom coding modifications. If you are looking for further modifications, customization those are considered as "custom modifications" and we don't provide free support or step-by-step instructions for custom coding modifications.
ou may purchase premium support: www.flexiblewebdesign.com/premium-support and let us take care the modifications for you directly on your website though.
I am providing you free-support about the layout one last time:
If you were using any "developer tools" (e.i: Firebug or Chrome Developer Tools) you will find your solution by yourself very easyly. See the screenshot.
Attachment Pasted_Image_1_24_15__6_13_PM.png not found
<div class="wrapper"> element limits the width to 900px (or what ever value you defined through template manager). So, the content, bottom-a, bottom-b etc..they are limited to 900px)
If you want to change the background of bottom-a, then you shouldn't apply the CSS rule the parent element, instead; you should apply the CSS rule to the module elements individually
to disable the background rule for bottom-a parent element:
section#bottom-a { background:inherit;}
to apply background rule to the module elements under bottom-a:
section#bottom-a div.wrapper div.grid-box { background:#ff0000;}
If you include these 2 CSS rules above (to any CSS file), the result will be (screenshot is taken from live DEMO of CoolMart):
Attachment ScreenShot2015-01-24at6.23.37PM.png not found
Same idea applies for "bottom-b" as well. It's parent element
section#bottom-b has 100%; but the modules inside this position are limited to 900px by
<div class="wrapper">
Regards.