[Solved] Unexpected gap at the top of content in HTML

Question

A large gap appears in the top of my web page, please check it and help.
Image link: https://www.sololearn.com/post/538929/?ref=app(See on desktop site, mobile site is customized)
Code link: https://codepen.io/BibekOli/pen/XWdzvZV
Or, https://code.sololearn.com/WXnxpRuCsGK5/?ref=app

Answer 1

Divya Mohan excatly, its inline

https://code.sololearn.com/WnqaKm7rBPLl/?ref=app

Answer 2

Change margin-top

.responsive-ad {
margin-top: 0px;
padding:0px;
background: black;
color: white;
text-align: center;
}

Answer 3

inside sidebar
vertical-align: top;

Answer 4

@Rei have you used vertical-align recently bcz I think it don't work now.

You might have used it with line-height.
Correct me if I mistaken.

Answer 5

Bibek Oli
Used css grid/flexbox for making 2cloumn or 3 column layout.
It is developed for this purpose and had no such problem.
Beleive me it will ease layout structure practising .

Answer 6

Rei Divya Mohan thank you.☺️

Answer 7

ཞıɬıƙą ɱıʂɧཞą yes, I have kept that that gap for header, the gap I was talking about is of sidebar, check this screenshot https://www.sololearn.com/post/538929/?ref=app