#page is wrapping everything including the header; therefore your styles won’t have the desired effect.
you possibly need to restrict the width of #main but that is difficult to say for sure, without a link to your site.
I’m doing everything on my local before going live. I will take a look at the
#main, but I’m pretty sure I tried
#page {
background:transparent;
}
#main,#primary {
background:#FFF;
width:912px;
}
#access {
margin-bottom:0;
}
I just redesigned my header and will play with the coding later.
Thanks
Right what you need to do if this makes sense is:
Have a overally container which is the body set the width to 100%
then have the header as a seperate div. then another container to hold the other things.
ok this is what i changed
#page {
background:transparent;
}
#main,#primary {
background:#FFF;
width:912px;
}
#access {
margin-bottom:0;
}
#branding { border-top: none; } /*remove the grey border at the top*/
/* One column */
.one-column #page {
max-width: 980px;
}
#page {
margin: 0em auto;
max-width: 980px;
}
Here’s the link, It’s live. The body did reduce to the left, but the menu and foot stays the same width.
http://boudoirtreschic.com/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you don’t receive further help, try a more relevant forum such as CSS Creator, as your issue seems to lack WordPress involvement.
Well as for now, I’m just going to load the redesigned header to fit the layout and play with it on the local server.
instead of:
#main,#primary {
background:#FFF;
width:912px;
}
try:
#primary {
background:#FFF;
}
#main, #access, #colophon {
background:#FFF;
width: 92.8%; margin: 0 4.1%;
}
make sure to adjust the width in the menu #access styles furher down in the stylesheet…
try not to use fixed widths in the otherwise flexible/responsive styles.
