Html 移动版页面顶部的随机填充

Html 移动版页面顶部的随机填充,html,Html,-这就是我在手机版上看到的,对于桌面媒体查询来说一切都很好,但不确定发生这种情况的确切原因。我试着寻找任何可以填充.header的元素,但是没有找到任何东西 参考网站: HTML: 导航的ul上的边距是导致它的原因 /* Simple fix. */ .navbar ul { margin: 0; } 或 谢谢,这就解决了! /* First page styling */ body{ margin: 0; } .header{ background: url(images/

-这就是我在手机版上看到的,对于桌面媒体查询来说一切都很好,但不确定发生这种情况的确切原因。我试着寻找任何可以填充.header的元素,但是没有找到任何东西

参考网站:

HTML:


导航的ul上的边距是导致它的原因

/* Simple fix. */
.navbar ul { margin: 0; }


谢谢,这就解决了!
/* First page styling */

body{
    margin: 0;
}
.header{
    background: url(images/matt-sclarandis-159838-unsplash.png);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat; 
    height: 100vh; 
    vertical-align: baseline; 
    font-family: 'Karla', sans-serif;
}

h1{
    color: white; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    text-align: center; 
    font-size: 20px;
}

.navbar li{
    display: inline-block; 
    padding: 10px;
    color: white; 
    font-family: 'Raleway', sans-serif; 
}

.navbar ul {
    text-align: center;
    padding: 0px; 

}

.container{
    margin: 0 auto;
    width: 50%;
    color: white; 
    text-align: center; 
    padding-top: 100px;
}

h2{
    font-family: 'Raleway', sans-serif;
}

h3{
    padding-top: 200px;
    line-height: 0px;
    font-weight: 100; 
    font-size: 15px;; 
    font-family: 'Raleway', sans-serif;
}

.explore{
    opacity: 0.65;
}

.explore:hover {
    opacity: 1; 
}

/* First page styling */

/* Second page styling */

.firstpage{
    background: url(images/aniket-deole-294646-unsplash1.jpg);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat; 
    height: 100vh; 
    vertical-align: baseline; 
    font-family: 'Karla', sans-serif;

    }

.firstelements{
    margin: 0 auto;
    width: 50%;
    padding-top: 250px;
    text-align: center; 
}

h4{
    font-family: 'Raleway', sans-serif;
    color: white; 
    font-size: 50px;
    font-weight: 800;
}

.yosemite{
    color: white; 
    padding-bottom: 15px ;
}

a{
    text-decoration: none; 
    color: white; 
}

.yosemitebtn{
    text-decoration: none;
    background-color: #2dcb70;
    width: 100px;
    height: 24px;
    border-color: #2dcb70;
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    padding-top: 10px;
    margin: 0 auto; 

}

/* Second page styling */

@media only screen and (min-width: 1080px){

    h2{
        font-size: 50px;
        padding-top: 100px;

    }

    p{
        max-width: 350px;
        margin: 0 auto; 
    }

    h3{
        padding-top: 300px;
    }

    .navbar{
        float: right;
        padding-right: 250px;
        font-size: 14px;
    }

    h1{
        float: left; 
        font-size: 20px;
        padding-left: 250px;
    }

}
/* Simple fix. */
.navbar ul { margin: 0; }
display: inline-block;
width: 100%;