Full Width Header

[theorganicbird]

I am building a site in Pretty Young Thing. I have taken the header out from the wrap, and tried every little thing to get the header to run full width of the browser. I am still stuck with ~20 or px of margin around the header that I cannot find anywhere in the code (using firebug). I have tried every little trick of changing width, margin, etc. Any ideas of what I'm doing wrong? The site is currently behind a coming soon splash bc my client doesn't want the site going live until it's finished.

[Derek]

It's hard to tell without being able to actually see the problem, but how have you done the full-width header? Is it custom CSS or are you using the Custom Header functionality found within some themes in the Dashboard under Appearance > Header?

---

Derek Rippe – CSS Artist & Genesis Fanboy @ SynaVista and MediaCairn Design Studio
Figure out your CSS problems with Firebug | Check out my Custom Comment Form Title plugin

[theorganicbird]

I'm trying to do it in Custom CSS. I'm using the Pretty Young Thing theme.

[theorganicbird]

This is the custom CSS I've added, but I'm still getting the white margins on either side of the header image. I literally have reached the point where I'm adding/changing every single kind of code I can think of to try and see what will change it from the Firebug side, but nothing is working...:

#wrap {
background-color: #fff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
margin: 0 auto;
width: 1300px;
}

#header {
height: 155px;
width: 1300px;
margin: 0 auto;
}

#inner {
padding: 0px 50px 0px 120px;
overflow: hidden;
width: 1292px;
}

.wrap {
margin: 0 auto;
width: 1300px;
}

body {
width: 100%;
}

#header .wrap,
#footer .wrap,
#footer-widgets .wrap {
margin: 0 auto;
max-width: 960px; //This is the default Prose width, but you can change it if you want.
}

.header-full-width #title a {
display: none !important;
}

#header #title {
display: none !important;
}

.header-full-width #title-area {
display: none !important;
}

#header {
background: url(http://designhermomma.com/wp-content/uploads/2013/08/smallernarrow-DHM-header1.png) no-repeat !important;
background-position: center;
background-position: left 10px;
display: block; /*Added this line*/
margin-left: auto; /*Added this line*/
margin-right: auto; /*Added this line*/
}

[Author]

Posts