Full Width Menu and Footer, Boxed Layout for the Body

Hey Rcpalabrica,
Use this code in your stylesheet.

.menu-header {
    background-position: 35% center !important;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin-left: -100% !important;
    margin-right: -100% !important;
    padding-left: 100% !important;
    padding-right: 100% !important;
}

.footer {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin-left: -100% !important;
    margin-right: -100% !important;
    padding-left: 100% !important;
    padding-right: 100% !important;
}

body {
	overflow-x: hidden;
}

Hi prabhukb,

It worked. you’re a genius.

Thanks so much! ??

Have a great day…

Hi prabhukb,

Just realized I got a problem when it is viewed on my tablet..

How do I fix the extra width on the right.. seems like the menu and the footer are extended all the way to the right.

Thanks so much..

Hi rcpalabrica,

Copy and Paste in your stylesheet (End of the stylehseet)

@media only screen and (max-width: 768px) {
	.menu-header {
		background-position: center 10px !important;
	}

	#wrapper .primary-menu .dd-selected {
		width: 20%;
		float: right;
		text-align: right;
	}
}

I pasted it already but this is what i got:
capture image from an ipad

is there a way to remove this excess space on the right?

Thanks so much..

Your site working well at my end.
Go to clear your history, and check your site.

Did it already. My apologies if i wasnt clear.

It looks ok when you visit the site on mobile. But when you try to swipe to the right there seems to be an additional space that is of the same width with the body.