Problems with coloured background in Dreamweaver CS6

Question

Hi,
Probably best if I attach images rather than describe the problem, so that's what I'll do.
As you can see there is a grey bar to the side of the page and it is the same at the bottom when I zoom out. I'm making this website as part of my Uni course and I have to follow a specific template so, please, don't judge me on what it looks like... lol.
The code for the background section looks like this:
body {
          background-color: #CC9966;
          background-repeat: repeat-y;
I have also coloured the footer.
#footer {
colours for text within the
footer division, ie <p id="footer">
color: #2D2D2D;
background-color: #CC9966;
So what do I have to change to make the colour fill the background entirely? I'm an amateur so please don't use too much technical language. I'm sure it's a simple fix, anyway.
Thanks a lot.

Answer 1

          WHAT IS THIS FILE?
          This file contains all the simple style properties, such as colours, fonts
          and backgrounds. Edit this file to customise the look of your content.
          If you want to change the layout styles (widths, heights, positions)
          see layout.css.
          |--------------------------------------------------------------------------
          | General Text Formatting
          |--------------------------------------------------------------------------
          html, body {
                    /* setting the default styles all text, inputs and textareas will have (unless specified otherwise) */
                    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                    font-size: .85em;
                    background: #E8EBEB url(../images/body-bg.jpg) repeat-x top left;
                    color: #3a3a3a;
          h1 {
                    font-size: 1.5em;
                    font-weight: bold;
                    color: #78AB46;
                    background: #fff;
                    margin: 0 0 .5em 0;
          h2 {
                    font-weight: bold;
                    padding: 1em 0 1em 0;
          p {
                    line-height: 150%;
                    padding: 0 0 1em 0;
          ul {
                    padding: 0 0 0 2em;
                    list-style: disc;
          ol {
                    padding: 0 0 0 2em;
                    list-style: decimal;
          li {
                    padding: 0 0 1em 0;
          strong {
                    font-weight: bold;
          em {
                    font-style: italic;
          blockquote {
                    color: #000000;
                    background: #C0D9AF;
                    padding: 1em 1em 0 1em;
                    margin-bottom: 1em;
                    font-style: italic;
                    font-size: 1.2em;
          #footer {
                    colours for text within the
                    footer division, ie <p id="footer">
                    color: #2D2D2D;
                    background-color: #CC9966;
          .screen-reader-only {
                    This is a special class used to prevent text from
                    being displayed on screen, while still making it visible to
                    screen readers. Use this class if you want to add extra
                    descriptive text for visually impaired users, but don't want
                    that description to be visible for other users.
                    For example:
                    <p class="screen-reader-only">Special text for screen readers</p>
                    text-indent: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    left: 0;
          |--------------------------------------------------------------------------
          | Page Links
          |--------------------------------------------------------------------------
          a:link {
                    color: #07087a;
                    text-decoration: none;
                    background-color: #fff;
          a:visited {
                    color: #07087a2;
                    background-color: #fff;
                    text-decoration: none;
          a:hover {
                    text-decoration: underline;
          a:active {
                    color: #07087a;
                    background-color: #fff;
          |--------------------------------------------------------------------------
          | Top Navigatin Links
          |--------------------------------------------------------------------------
          TOP NAVIGATION LINKS
          The following styles control the appearence
          of the top navigation links, eg.
          <a class="top-link" href="default.htm">Home</a>
          a.top-link {
                    these styles will apply to ALL links (:link, :visited, :hover and :active) unless overridden
                    display: block;
                    padding: .7em 0 .7em 0;
                    margin: 0 1.5em 0 0;
                    background: #EEEFEE url(../images/nav-bg.gif) repeat-x top left;
                    color: #07087a;
                    border-bottom: solid .3em #EEEFEE;
                    padding: 0;
                    line-height: 2.5em;
          .top-link:link {
                    /* styles for normal, unvisited links can be set here */
                    /* these styles will override the defaults set for .top-link above */
                    text-decoration: none;
          .top-link:visited { 
                    /* styles for links once visited can be changed here */
                    /* these styles will override the defaults set for .top-link above */
                    text-decoration: none;
          .top-link:hover {
                    /* styles for top links when a user hovers over it can be changed here */
                    text-decoration: none;
                    border-bottom: solid .3em #c2c2c2;
          .top-link:active { 
                    /* Styles for when the link is being clicked can be changed here */
          .top-link.selected:link, .top-link.selected:visited {
                    /* Sets the style of a link that has been selected (ie. has a class of selected)
                       for example (note the additional class "selected"):
                              <a class="top-link selected" href="content.htm">Content Page</a>
                    border-bottom: solid .3em #aed637;
                    cursor: default;
          |--------------------------------------------------------------------------
          | Footer Links
          |--------------------------------------------------------------------------
          Change these if you want your footer links to have a
          different style to other links
          #footer a:link {
                    background: #CC9966;
                    color: #E7C6A5;
          #footer a:visited {
                    background: #CC9966;
                    color: #E7C6A5;
          #footer a:hover {
                    background: #CC9966;
                    color: #E7C6A5
          #footer a:active {
                    background: #CC9966;
                    color: #E7C6A5;
          |--------------------------------------------------------------------------
          | Header Colours
          |--------------------------------------------------------------------------
          #header {
                              Colours for <div id="header">
                              See layout.css for layout and size properties
                    background: #D1EEEE url(../images/header-bg.gif) repeat-x top left;
                    color: #fff;
          #nav {
                              Colours for <ul id="nav">
                              See layout.css for layout and size properties
                    background: #EAEAEA url(../images/nav-bg.gif) repeat-x top left;
                    color: #07087a;
          |--------------------------------------------------------------------------
          | Wrapper
          |--------------------------------------------------------------------------
          This controls the styles for the wrapper div that
          contains all page elements, ie:
          <div id="wrapper">
          #wrapper {
                    background: #fff;
                    color: #3a3a3a;
          |--------------------------------------------------------------------------
          | Widget Box Colours
          |--------------------------------------------------------------------------
          Colour styles for widget boxes, ie <li class="widget">
          See layout.css for layout and size properties
          .widget {
                    background: #C0D9AF;
                    color: #000;
          .widget-heading {
                    color: #000;
                    background: #C0D9AF;
                    border-top: solid .3em #375852;
WHAT IS THIS FILE?
This file contains all the more advanced layout style properties, such as
widths, heights, spacing and positioning. If you want to change colours,
backgrounds and fonts, see simple.css.
|--------------------------------------------------------------------------
| Wrapper
|--------------------------------------------------------------------------
This controls the styles for the wrapper div that
contains all page elements, ie:
<div id="wrapper">
#wrapper {
margin:0 auto;
min-width: 460px;
width: 800px;
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
#header {
This controls the layout of <div id="header">
If you change the image inside the header,
make sure you set the "height" property below
to match the height of the new image
See simple.css for colour properties
position: relative;
margin: 0 0 0 0;
overflow: hidden;
width: 800px;
#nav {
Layout properties for <ul id="nav">
See simple.css for colour properties
display: block;
padding: 0 0 0 20px;
list-style: none;
clear: both;
font-size: 1.3em;
height: 2.8em;
#nav li {
display: block;
float: left;
list-style: none;
padding: 0;
|--------------------------------------------------------------------------
| Main
|--------------------------------------------------------------------------
|
#main {
margin: 0 auto;
position: relative;
overflow: hidden;
width: 800px;
background-color: #FFFFFF;
#content {
Styles for the div thay wraps the main content, eg:
<div id="content">
padding: 1.5em 20em 20px 20px;
#content.full-width {
Adding a class of "full-width" to the #content div
will use these styles, eg.
<div id="content" class="full-width">
padding-right: 20px;
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
#sidebar {
Styles for the sidebar wrapper, eg.
<ul id="sidebar">
You can probably leave this as is
width: 15em;
padding: 6em 20px 0 0;
float: right;
|--------------------------------------------------------------------------
| Image Alignment Classes
|--------------------------------------------------------------------------
These are used to align images (see the content page example)
You shouldn't need to change these.
.align-right {
float: right;
margin: 0 0 1.5em 1em;
.align-left {
float: left;
margin: 0 1em 1em 0;
.align-centre {
margin: 0 0 1.5em 0;
text-align: center;
.caption {
font-style: italic;
text-align: center;
|--------------------------------------------------------------------------
| Widget Boxes
|--------------------------------------------------------------------------
Layout styles for widget boxes, ie <li class="widget">
See simple.css for colour properties
.widget {
margin: 0 0 1em 0;
list-style: none;
padding: 0;
.widget-heading {
padding: 15px 10px;
font-size: 1em;
margin: 0;
.widget-content {
padding: 0px 10px 0 10px;
.photo-gallery {
list-style: none;
padding: 0;
margin: 0;
.photo-gallery li {
float: none;
display: inline;
padding: 0;
.photo-gallery li img {
padding: 0 1em 1em 0;
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
Styles for <p id="footer">
#footer {
margin:0 auto;