Extend Footer color to full width

I'm trying to make the footer go full width to the screen left, right and bottom. I have custom CSS that I've modified so far:

#footer
{
  background: #000066;  
padding: 30px;  
  margin-top: 60px;
text-align: left; 
}

But can't figure out how to make the margin or padding to the container to 0. Not sure if I have the language correct here.

Hi,

What is site url? We can check this easier

cottonmule.com

On 11/26/2022 at 4:20 AM, galbers said:

cottonmule.com

Add to Design > Custom CSS

footer#footer {
    max-width: 100% !important;
}

@tuanphan Just put the max-width code in the custom CSS and it doesn't seem to be adjusting to the full width of screen. Is there another option? Do I need to select the block instead?

On 11/29/2022 at 8:55 PM, galbers said:

@tuanphan Just put the max-width code in the custom CSS and it doesn't seem to be adjusting to the full width of screen. Is there another option? Do I need to select the block instead?

I see it worked here. Or you need footer touch the left & right of screen?

@tuanphan Yes, I want the footer color to touch left, right, bottom of screen. Do you know how to code that?

@tuanphan Perfect!!! Thanks.

We have a footer but it only goes the full width on certain pages. Not sure what code to use to fix that. www.megbraffdesigns.com is fine, full width. Product pages like https://www.megbraffdesigns.com/special-inscription-book do not spread to the full page width. 

On 2/28/2024 at 6:05 AM, Abbybricks said:

We have a footer but it only goes the full width on certain pages. Not sure what code to use to fix that. www.megbraffdesigns.com is fine, full width. Product pages like https://www.megbraffdesigns.com/special-inscription-book do not spread to the full page width. 

The page doesn't exist. Can you check it again?