How to Make the Blogger Header and Footer Full Width

Hello guys ! Just recently I've been updating and revising my posts simply to make sure that they are you know updated. I'm just so thankful that even though I've been gone for the blogger community for almost a year the website is still getting enough traffics - that's a good news for me. Haha. Well anyway so much for that, today I will be sharing to you guys on how to make the blogger header and footer part full width. So let's get started.

March 5, 2017 - Added alternative option for Step 2.3 just in case code cannot be found.

Step 1. Proceed to EDIT HTML Page.

Step 2.1 Find this code below body {
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 
replace with padding: 0px;

Step 2.2 Find this code below .content-inner {
padding: $(content.padding) $(content.padding.horizontal);  
replace with padding: 0px; 

Step 2.3 Find this code below $(content.background.color.selector
background-color: $(content.background.color);
replace with background-color: $(body.background);

*Alternative Option : Find this code .content-inner
Insert this code background-color: $(body.background);

Step 2.4 Find this code below .content-outer, .content-fauxcolumn-outer, .region-inn
max-width: $(content.width);
replace with  max-width: 100%;

Step 3. Add Code 3.0 above ]]></b:skin>

CODE 3.0

 .main-outer {
background: $(content.background.color);
}
.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}

Step 4. Find this code </b:template-skin> then above ]]></b:template-skin> add Code 4.0

CODE 4.0

.main-outer {
max-width: $(content.width);
margin: 0 auto;
}

Thank you so much for the visit, please don't forget to like the blog on Facebook - a single like gives me motivation :P . For any concerns please relay it to me via comment with the detailed concern. Happy blogging!