how do i modify the footer so it extends width of monitor

Second time posting this question.  First time, I had some responses but then we changed the site design a bit.  

All I want to do is have the teal bar extends across the browser like the top teal bar.  I tried repositioning the footer div but it just seems to mess things up more.

/* ~~ The footer ~~ */
.footer {
	padding: 10px 0 0 0;
	position: relative;
	clear: both; 

.footer p{

Open in new window

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

That is going to involve some re-structuring.  You have the footer inside of content which has a fixed width of 950px.  The whole footer needs to be outside of content with a width of 100%, or content needs to be width:100%, but I think that will screw up other parts of the page.

Take the whole footer div out of the container div, and place it just before the closing body tag (</body>).
AND, add margin:0: to the html css!!
nsitedesignsAuthor Commented:

Did you mean I need to add the following the css?

.html {
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

nsitedesignsAuthor Commented:
Well, it extended it more but it is not out to the edges.  I added padding:0 thinking that might be the ticket but that didn't really do anything.
This is from your css file:\

.html {  /* needed for footer bar to extend across the page */

it should be:

	margin: 0px;  //px or no units at all instead of p

Open in new window

and to force it all over, add it to the body tag as well.
body {
	margin: 0px;

Open in new window

You should remove margin-bottom: 50px; from the body tag, it makes no sense.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nsitedesignsAuthor Commented:
The extra "p" was a mistake.  I removed the . in front of the html and added a margin to the body tag.  Worked like a charm  Beeauttiful!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.