Dreamweaver CC fluid grid divs not stretching out to cover 100% of the screen

Question

Hi there,
I am doing another responsive layout using DW CC and I have come across a problem.
The design has coloured divs stretching across the page at 100% with a coloured background and borders.
I have already done the design up as a fixed width layout to get the colour codes etc and that is working fine, with the colours stretching across the screen.
Now I am putiing the design into DW CC using fluid grid layout and there is a white border outlining the website.
I can't work out how to get rid of this. Below are extracts of my two lots of CSS stylesheets, one for a fixed grid layout and one for a responsive layout
FIXED WIDTH CSS
body,td,th {
    font-family: Calibri;
    font-size: 14px;
    color: #000;
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
*/This header wrapper stretches across the entire screen no matter what the size and does not have a white border on the left and the right
#headerWrapper {
    background-color: #000;
    height: 101px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
FLUID GRID CSS
The fluid grid layout CSS has the following in it:
.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;       
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
    clear: none;
    float: none;
#div1 {
*/This header wrapper stretches across the grid layout only and has a white border on the left and the right
#headerWrapper {
    max-width: 100%;
    height: 101px;
    background-color: #000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
What do I need to add to the fluid grid layout to make the headerWrapper div stretch across the screen, no matter what the width?
What do I have to put in the fluid grid CSS to get it to do this?
Thanks in advance!

Answer 1

I did it! I can't believe it. The code I used is follow. The bar divs set the colour and border across the entire page and the wrapper divs contain the content in the various bars across the page.
I must say that DW CC fluid grids are much more stable to work with and can take a lot of hand coding now. It is a great improvement on when I tried to use Fluid grids on a project last year.
IN THE PHONE MEDIA QUERY SECTION
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
#headerBar {
          background-color: #000;
          min-height: 101px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          padding-top: 2.735px;
#headerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#menuAnimationBar {
          background-color: #B7B7B7;
          height: 293px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(192,192,192,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
display: none;
#contentBar {
          background-color: #F8FCF1;
          min-height: 200px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,251,234,1.00)),color-stop( 100% , rgba(251,253,247,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
#contentWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#socialMediaBar {
          background-color: #000;
          min-height: 83px;
          border-top-width: 2px;
          border-bottom-width: 2px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-top-color: #BDDB6D;
          border-bottom-color: #BDDB6D;
#socialMediaWrapper {
          color: #FFF;
          width: 86.45%;
          padding-left: 2.275%;
          padding-right: 2.275%;
          clear: none;
          float: none;
          margin-left: auto;
          padding-top: 2.275%;
#footerBar {
          color: #FFF;
          background-color: #AAAAAA;
          min-height: 176px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(185,185,185,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
#footerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
IN THE TABLET MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          padding-left: 0%;
          padding-right: 0%;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#headerBar {
#headerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
display: none;
#contentBar {
#contentWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
IN THE PC MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          max-width: 1920px;
          padding-left: 0%;
          padding-right: 0%;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
#headerBar {
#headerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
          display: block;
#contentBar {
#contentWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
          width: 88.5%;
          height: 293px;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
          clear: none;
    float: none;
    margin-left: auto;