Title: Header/Footer width
Last modified: August 21, 2016

---

# Header/Footer width

 *  [llr19](https://wordpress.org/support/users/llr19/)
 * (@llr19)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/)
 * Hello!
 * I am trying to get my header and footer to be the same width (960px) as the body
   content.
 * Whenever I go to the stylesheet and change this width to 960px (instead of 100%),
   it jumps to the left side of the screen:
    #masthead-wrap { background-color: #
   318ce7; -webkit-box-shadow: 0 2px 3px rgba(100, 100, 100, 0.25); box-shadow: 
   0 2px 3px rgba(100, 100, 100, 0.25); position: absolute; top: 0; z-index: 1000;
   width: 100%; }
 * I can’t figure out how to get them centered on the page.
 * If anyone could help, I’d appreciate it!
    -Leah

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183780)
 * Hi Leah, could you provide a link to your site so I can take a look? Thanks.
 *  Thread Starter [llr19](https://wordpress.org/support/users/llr19/)
 * (@llr19)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183781)
 * Hi Kathryn,
 * Unfortunately, the site is only on our server and not live yet. I took a [screenshot ](http://www.csb.pitt.edu/cms/uploads/images/test/CSB%20screenshot.png)
   of the site, if that helps at all.
 * Thanks,
    Leah
 *  Thread Starter [llr19](https://wordpress.org/support/users/llr19/)
 * (@llr19)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183782)
 * It will probably be on a staging site in a couple of weeks. I assume you need
   to see the code. I’ll post the site whenever we have it running.
 * Thanks a lot!
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183783)
 * Hi there, thanks for the screenshot. You may need to apply a width to your body–
   or edit your child theme files to add a wrapper class instead – to get this working.
   I added this code to some custom CSS and it centered the header and footer and
   reduced them both to 960px. You may also need to add some padding as needed:
 *     ```
       body {
       	width: 960px;
       	margin: 0 auto;
       }
   
       #masthead-wrap {
       	width: 960px;
       	margin-left: auto;
       	margin-right: auto;
       }
       ```
   
 * If you have any questions about this – or about child themes, custom CSS, or 
   wrapper classes – just let me know. 🙂
 *  Thread Starter [llr19](https://wordpress.org/support/users/llr19/)
 * (@llr19)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183784)
 * That’s what I had originally tried, but for some reason, the header jumps to 
   the left ([see photo](http://www.csb.pitt.edu/cms/uploads/images/test/screenshot2.png)).
   I tried adding padding, but the location of the header still changes based on
   how big one’s browser is.
 * This has been puzzling me all week!
 * Best,
    Leah
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183786)
 * Are you sure you also included this bit in your code?
 *     ```
       body {
       	width: 960px;
       	margin: 0 auto;
       }
       ```
   
 * Without this CSS, my test-site header does jump to the left, but with it, the
   header and footer both center.
 * It’s possible that some of your other custom code is affecting this, so I may
   need to take a look directly once your site is on a staging server to be able
   to help further.
 *  Thread Starter [llr19](https://wordpress.org/support/users/llr19/)
 * (@llr19)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183791)
 * Hi Kathryn,
 * It worked like a charm!! I had neglected to add the body CSS (oops).
 * Thank you so much! I really appreciate it.
 * Best,
    Leah
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183792)
 * Wonderful, glad to hear that did the trick. 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Header/Footer width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/superhero/1.4/screenshot.png)
 * Superhero
 * [Support Threads](https://wordpress.org/support/theme/superhero/)
 * [Active Topics](https://wordpress.org/support/theme/superhero/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/superhero/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/superhero/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)

 * 8 replies
 * 2 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/headerfooter-width/#post-4183792)
 * Status: not resolved