Thank you

Apologies if this being posted in the incorrect forum. I have been looking for a few hours and cannot find a straight or simple answer on how to do this.

The logo and navigation links and right CTA button appear to be centered. We would them to be full width so the logo and navigation links in the header/footer are at the extreme left of any browser/screen size and the right CTA button in the header to be on the extreme right.

Any help would be appreciated. Thank you

I am trying to achieve a full-width footer content. Could someone help me with some CSS?

I tried this CSS but no luck at all:

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

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

Kindly take a look at my footer: www.xyzagerondio.com

I wanted to have something like this (Please see image link below)…

https://www.dropbox.com/s/sf2wmh5rfg9h8g3/image.JPG?dl=0

Thank you so much for whoever will help me.

Xyza

I’m trying to make a full width footer for a site using 2012. Is there an easy way to do this or would it be better to pick another theme?

I am helping someone add an instagram widget to the footer of her blog, and it is not wanting to go full width. I’ve never had issues with this from the previous times I have installed this for people. Could something be blocking it?

The site it https://www.dsmomentsblog.com

Is there CSS I can add to make that widget full width?

Here’s my website: www.dunnlizardo.com
So basically, I’ve been trying to figure out how to make a custom footer above the main footer as my theme is formatted in boxed version so I would want to make custom footer to be full-width so I could add my instagram widget. Here are the websites with full-width footers with instagram widget:
shinebythree.com
garancedore.fr/en/
garypeppergirl.com

Please, if you know any way I could do this feel free to help.

Thanks!

functions.php

[ Moderator note: please wrap code in backticks or use the code button. ]

// Add header container
add_action( 'woo_header_before', 'header_container_start' );
function header_container_start() { ?>
    <!--#header-container-->
    <div id="header-container">
<?php
}
add_action( 'woo_header_after', 'header_container_end', 8 );
function header_container_end() { ?>
    </div><!--/#header-container-->
<?php
}

// Add navigation container
add_action( 'woo_nav_before', 'nav_container_start' );
function nav_container_start() { ?>
    <!--#nav-container-->
    <div id="nav-container">
<?php
}
add_action( 'woo_nav_after', 'nav_container_end' );
function nav_container_end() { ?>
    </div><!--/#nav-container-->
<?php
}

// Add footer widget container
add_action( 'woo_footer_top', 'footer_widgets_container_start', 8 );
function footer_widgets_container_start() { ?>
    <!--#footer-widgets-container-->
    <div id="footer-widgets-container">
<?php
}
add_action( 'woo_footer_before', 'footer_widgets_container_end' );
function footer_widgets_container_end() { ?>
    </div><!--/#footer_widgets_container_end-->
<?php
}

// Add footer container
add_action( 'woo_footer_before', 'footer_container_start' );
function footer_container_start() { ?>
    <!--#footer_container_start-->
    <div id="footer-container">
<?php
}
add_action( 'woo_footer_after', 'footer_container_end' );
function footer_container_end() { ?>
    </div><!--/#footer_container_end-->
<?php
}

Custom CSS

body {padding: 0;}
#wrapper {padding:0;max-width: 100% !important;}
#top {padding:0 20px;}
#header-container {background:#316594;padding:0 20px;}
#nav-container {background:#CDDAE3;padding:0 20px;}
#content {padding:0 20px;}
#footer-widgets-container {background:#CDDAE3;padding:0 20px;}
#footer-container {background:#316594;padding:0 20px;}

Thanks in advance for help:)

/* -----------------------------------------------------------

   3:  SITE STRUCTURE

	Elements on all or most pages

   ----------------------------------------------------------- */
#wrapper { margin:0 auto; width:980px; position:relative; }
#inner { float:left; background:#fff; padding:0; width:980px; }
#header-wrap { float:left; width:980px; }
#header{ position:relative; width:920px; float:left; padding:31px 0px 0px 0px; min-height:75px;/* background:url(lib/img/dashedline.png) no-repeat bottom;*/ }
#header-top{width:960px; padding:5px 10px 2px 10px; margin: 0 0 0 0px; background:#f4f4f4; float:left;position:absolute; top:0; right:-60px;}

#logo { float:left; width:350px; }
#logo h1 { font-size:48px; margin:0; }
#logo h1 a { color:#222; text-decoration:none; line-height:1em; }
.inner { margin:0 auto; width:900px; }

.content-wrap {float:left; width:900px; margin:0; padding:0 40px 30px 40px;}

.pageheader {float:left; display:block; width:900px; margin:0 0 30px -40px; padding:0 40px 0px 40px; background:#444;}
.pageheader h1, .pageheader h2, .pageheader h3{color:#f9f9f9; margin-top:20px;}

#content-default { float:left; width:590px; padding:0; display:block; margin: 0 30px 0 0; min-height:200px; }
.content-default { float:left; width:590px; padding:0; display:block; margin: 0 0 0 0; min-height:200px; }

/* For proper floating of content/sidebar */
.content-left {display:block; width:590px; float:right; padding: 0 0 0 30px; margin:0 0 0 0; border-left:1px solid #ddd; /* When left sidebar */}
.content-right{display:block; width:590px; float:left; padding: 0 30px 0 0; margin:0 0 0 0; border-right:1px solid #ddd; /* When right sidebar */}

#footer {width:900px; background:#222; padding:40px; float:left; }

/* Column layout */
.one-third, .two-third, .one-fourth, .three-fourth, .one-half, .one-fifth, .two-fifth, .three-fifth { display:inline; float:left; }
.one-fifth { width:164px; margin:0 20px 20px 0; }
.two-fifth { width:348px; margin:0 20px 20px 0; }
.three-fifth { width:532px; margin:0 20px 20px 0; }
.one-fourth { width:210px; margin:0 20px 20px 0; }
.three-fourth { width:670px; margin:0 20px 20px 0; }
.one-third { width:280px; margin:0 30px 20px 0; }
.two-third { width:590px; margin:0 30px 20px 0; }
.one-half { width:440px; margin:0 20px 20px 0; }

You can see it at https://www.paylinedata.com
I want to make the top menu, header, footer menu and menu all full width to fit the browser. I am okay if the main menu can’t be full width but I would like it to be as well.

Thank you in advance for any help.