How to make your header / navigation / post area full screen (full width)?

In my last post I have discussed How to get rid of empty spaces left after removing navigation bar?
In this post I will tell you how to make header full length. Many people try to get rid of margin on both sides of header. 
If header is extended to full length your blog will look more attractive. 
So, follow the steps given below :-  

Step 1: Login to your blog and click on " Template"

Step 2: ( most important) Before making any changes Backup our template.

Step 3: Now click on ' Edit HTML' and click "proceed".

Step 4: Find the following code:
                      
                                                       <b:skin> ... </b:skin>

              you will find it in line  13.

Step 5: Expand it and press ' CTRL + F' to open search dialogue box.

Step 6: Type ' body' in search dialogue box and you will see the following code:
            
                          body {
               font: $(body.font);
                               color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

$(body.background.override)

}

            replace the 

                              padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

    

            with 

                                         padding: 0px;

Step 7:  now search for .content-inner. in the search box and following code appear:

                

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

             replace the above code with
         
             .content-inner { padding: $(content.padding) 0px; }

Step 8:  search .content-outer, .content-fauxcolumn-outer, .region-inner

   

            it will look like this: 

             

                        .content-outer, .content-fauxcolumn-outer, .region-inner {

min-width: $(content.width);

max-width: $(content.width);

_ width: $(content.width);

}

              

               replace 

                                 max-width: $(content.width);

                with 

                                 max-width: 100%;

              now you can see that your header become full width.

              if you want to make your post + sidebar also full width then do 2 steps more.

Step 9: Find ]]> </b:template-skin> and  paste the following code above it to make your blog 

               post area also full width.

        

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

Step 10: Search  and paste the following code above it:

                     .tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

                  congrats you have done it.

        

               if you find blog helpful please leave your comment below anf if found troubling asks freely 

   

                thanks!!!