How To Reduce Spacing Between Header Description And The Bottom Column For Blogger Simple Template

Last week I realized the empty spacing between of the header description "Frequently Asked Tech Questions With Jargon-Free Answers" together with the yellow color strip and the whole content below is rather wide.

Then I realized it was because I added a side bar gadget where I pasted a set of Javascript.

It is for it to embed responsive YouTube video on blog without increasing page loading time.


With the side bad widget, it pushed the bottom content slightly downwards; thus causing a wider empty spacing.

See the spacing difference for BEFORE and AFTER as shown below:

(BEFORE)

---

(AFTER)

This is how I reduced the spacing between the header description and the bottom content (both sidebar and center inner column)

1. Click on "Theme".

2. Click on the orange color "Customize" button.

3. Then click On "Advanced".

4. Drag the vertical slider, until you see "Add CSS".

5. Click on "Add CSS".

6. A box will pop up on the right hand side.

7. Paste this set of code provided below onto the box.

.main-inner {
    padding-top: 30px;
    padding-bottom: 30px
}

Note: You need to adjust the number 30 to your requirement.

8. Then click "Apply to Blog".

That's all.