White bar in CSS showing but not defined

Question

I am having some trouble trying to figure out what's happening with my page. As you can see below on the mobile version, it appears right next to the top part of the logo.

My current code for nav (the element in blue) is:

nav {
top: 0;
left: 0;
text-align: center;
font-style: italic;
font-weight: 700;
font-size: 25px;
}

Since it maybe hard to tell just by the picture, you can find the code to this page in https://jsfiddle.net/bg5srnj8/1/

Possible duplicate of [CSS margin terror; Margin adds space outside parent element](https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element) — Temani Afif, Apr 06 '18 at 20:40
Hi Miguel, can you please provide a [mcve] in the question itself? The JSFiddle is helpful but has way too much code, and the mcve needs to be in the question, not linked. — TylerH, Apr 06 '18 at 20:40
possible duplciate of https://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down — Temani Afif, Apr 06 '18 at 20:41

score 2 · Accepted Answer · answered Apr 06 '18 at 20:42

2

nav > img {
    vertical-align: middle;
    margin: 0px 25px 10px 25px;
}

you had a 10px margin top in the image. I hope it works.

answered Apr 06 '18 at 20:42

Marlon Adarme

357
4
15

Yes, that's it! Thanks! – Miguel Santana Apr 06 '18 at 20:44
but you need to say why ? the img is inside the nav .. so why should the nav be lower ? and not the image – Temani Afif Apr 06 '18 at 20:44
@TemaniAfif I don't know, can you tell us? please – Marlon Adarme Apr 06 '18 at 20:45
check the duplicate link i shared above and you will understand ... and you will also get a better way than simply removing the margin – Temani Afif Apr 06 '18 at 20:46

White bar in CSS showing but not defined

1 Answers1