How i Removed the excess space left by Blogger NavBar

This post is part of my Blogger Tips series - making changes to my Default blogger template, and documenting them for future reference.

I recently removed the Blogger Navigation bar by turning it of from Template layout as explained in this post titled "Features of the Blogger Default NavBar and How to remove it." but the space it occupied still remained (A lot of Blogger users don't notice this)
This adds to an already large header: If you're conscious of the advantages of optimizing space on your blog, then you'd understand why i couldn't just let it BE!
To remove the Excess Space in Header left by the Navbar - Do this:

1. Go to your Blog Dashboard, Template >> Click the Customize Button
   In the Blogger template designer, click Advanced >> Add CSS

   

   Blogger template Designer - Add CSS

   
   
2. Paste this Code in the text Box provided:
   
   

   #navbar-iframe {display: none !important;}body .navbar {
   height:0px;
   }
   .content-outer {
   margin-top:0px;
   }

3. Click "Apply To Blog" and Your Excess Header Space problem caused by NavBar will be solved!.

Happy Blogging...