How To Remove Extra Space From Blog Header

Ever Since I started my BLOG I was wondering how can I get rid of extra spaces that show above and below the Blog Header. Thankfully with CSS found a way to achieve this.
We just need to follow below simple steps and its done.. So lets get started.

Before making any changes to blogger template it better to take a backup of existing template. This really helps if some thing goes wrong you can go back to current state.

Take Backup Of Your Existing Template

Just take a look the blog and see how much extra space its showing.

- Login to your blogger account.
- Click on  Template Link on left sidebar
- Click on ‘Customize’ button.

- Go to Advanced –> Add CSS. This will show the CSS window as well your blog below it. As soon as you add the CSS object it shows its impact live so that you will know how the blog will look after this change.

- Paste the below code in the ‘Add custom CSS’ box. Adjust the values based on your look and feel. I love to add comment so that you will know what you have customized if later point of time you need to look back and check.

/* Tauseef - Removing Extra Space - Above Header Box*/
.content-inner 
{margin-top: -40px !important; 
}

/* Tauseef - Removing Extra Space - Left and Right Margin*/
.header-inner 
{
margin-left: 0px !important;
margin-right:0px !important;
}

/*Tauseef - Removing Extra Space - Header Top and Bottom Margin*/
.Header h1
{
margin-top: -20px !important;
margin-bottom:-20px !important;
}

/*Tauseef - Removing Extra Space - Setting Padding*/
.header-inner .Header .titlewrapper 
{
padding: 0px 20px;
}

/*Tauseef - Removing Extra Space - Around Description*/
.header-inner .Header .descriptionwrapper 
{
padding: 0 30px;
}

/*Tauseef - Removing Extra Space - Around Description*/
.Header .description
{
margin:0 0 -10px 0;
padding:0 10px
}

- Once you feel the outcome is good, click on Apply to Blog button on top right corner.

Go and check the blog, you are gonna love it…

Enjoy Blogging....