Search code examples
csshtmlspace

Removing space below webpage

I am trying to remove this little space I get below my entire webpage. Below will be my css page and my html page. It showed up some time between moving my css from local to a stylesheet. Not sure what it could be. Any ideas would be greatly appreciated! Thank you!

HTML:

<html
    <head>
        <link rel="icon" href="Pictures/BluBeatsLogo2.png"> <!-- Icon in browser tab -->
        <link rel="stylesheet" type="text/css" href="styling.css"><!-- Stylesheet Import -->

        <style>            
            .music{
                padding-top:130px;
                text-align: center;
            }

            .music h1{
            font-size:64px;
            color:rgba(75,75);
            text-shadow: -3px 3px rgb(255,255,255);
            text-align: center;
            }
        </style>
    </head>

    <body>
        <div class=header>
        <a href ="index.html">
<img src = "Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;">
        </a>
    <ul class="nav">
        <li><a href="index.html" style="color:white;">Home</a></li>
        <li><a href="music.html" style="color:white;">Music</a></li>
        <li><a href="beats.html" style="color:white;">Beats</a></li>
        </ul> 
    </div> 
    <!-- End of Header -->

    <div class=main>
        <div class=music>

            <h1>Latest Tracks</h1>

<iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
        </div><!-- End of Music -->
    <div class=connect>
        <h1>Connect</h1>
        <div class=connectList>
           <ul>
               <a href="https://www.instagram.com/blubeats/" target="_blank">
               <li><img src = "Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li>
               </a>

               <a href="https://soundcloud.com/blubeatsmusic/" target="_blank">
               <li><img src = "Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li>
               </a>

               <a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank">
               <li><img src = "Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li>
               </a>

            </ul> 
        </div><!-- End of connectList -->
    </div><!--End of connect -->
    <footer>
    <h1>Contact</h1>
        <ul>
            <li>Email: blubeatsmusic@gmail.com </li>
        </ul>
    </footer><!-- End of Footer -->
     </div><!-- End of Main -->
    </body>`enter code here`
</html>

CSS:

/Font Import/ @import url('https://fonts.googleapis.com/css?family=Oleo+Script');

body{
    background-color: rgba(63, 133, 244,.75);
    font-family: 'Oleo Script';
    margin:0px;
    padding:0px;
}

ul{
    list-style:none;
}

.nav{
    list-style: none;
    margin:0;
    float:right;
    padding-top:62px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px;
    grid-auto-rows: repeat(1,1fr);
    grid-row:1/1;
    grid-column: 2/2;
}

.nav li{
    font-size: 64px;
    display:inline;
    color:white;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:0px;
}

.nav li:hover{
    color:#1995d3;
    cursor: pointer;
    text-shadow: 0 0 15px #1995d3;
    }

.header{
    background-color:rgba(30,30,30,.7);
    position: fixed;
    top: 0;
    padding-bottom:0;
    margin:0;
    width:100%;
}

.header a{
    height: 150px;
    width: 150px;
}

.header img{
    height: auto;
    width:auto;
    max-height: 100%;
    max-width: 100%;
}

.connect{
    width: 100%;
    max-width:100%;
}

.connectList {

    width: 100%;
    max-width:100%;

}

.connect h1{
    color:rgba(0,0,0,1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
}

.connectList ul{
    list-style: none;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:200px;
    grid-auto-rows: repeat(1,1fr);
    font-size:40px;
    color:rgba(75,75);
    text-shadow: -3px 3px rgb(255,255,255);
    text-align: center;
}

a{
    text-decoration: none;
}

a:visited{
    color:rgba(0,0,0,1);
}

connect a:hover{
    cursor:pointer;
}

footer h1{
    color:rgba(0,0,0,1);
    font-size: 36px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
}

footer ul{
    text-align:center;
    font-size: 24px;
}

.about{
    text-align:center;
    padding-top:0px;
    margin-top:0px;
}

.about h1{
    color:rgba(0,0,0,1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
    margin-top:0px;
    padding-top:0px;
}

.about p{
    color:rgba(0,0,0,1);
    font-size:24px;
    text-align:center;
}

.main{
    background-color:rgba(0,0,0,.5);
}
Solution

  • You're having collapsing margins. To fix this, add overflow: auto; to your footer:

    .music {
    padding-top: 130px;
    text-align: center;
}

.music h1 {
    font-size: 64px;
    color: rgba(75, 75);
    text-shadow: -3px 3px rgb(255, 255, 255);
    text-align: center;
}

body {
    background-color: rgba(63, 133, 244, .75);
    font-family: 'Oleo Script';
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
}

.nav {
    list-style: none;
    margin: 0;
    float: right;
    padding-top: 62px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: repeat(1, 1fr);
    grid-row: 1/1;
    grid-column: 2/2;
}

.nav li {
    font-size: 64px;
    display: inline;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

.nav li:hover {
    color: #1995d3;
    cursor: pointer;
    text-shadow: 0 0 15px #1995d3;
}

.header {
    background-color: rgba(30, 30, 30, .7);
    position: fixed;
    top: 0;
    padding-bottom: 0;
    margin: 0;
    width: 100%;
}

.header a {
    height: 150px;
    width: 150px;
}

.header img {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
}

.connect {
    width: 100%;
    max-width: 100%;
}

.connectList {
    width: 100%;
    max-width: 100%;
}

.connect h1 {
    color: rgba(0, 0, 0, 1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255, 255, 255);
    text-align: center;
}

.connectList ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 200px;
    grid-auto-rows: repeat(1, 1fr);
    font-size: 40px;
    color: rgba(75, 75);
    text-shadow: -3px 3px rgb(255, 255, 255);
    text-align: center;
}

a {
    text-decoration: none;
}

a:visited {
    color: rgba(0, 0, 0, 1);
}

connect a:hover {
    cursor: pointer;
}

footer {
    overflow: auto;
}

footer h1 {
    color: rgba(0, 0, 0, 1);
    font-size: 36px;
    text-shadow: -3px 3px rgb(255, 255, 255);
    text-align: center;
}

footer ul {
    text-align: center;
    font-size: 24px;
}

.about {
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
}

.about h1 {
    color: rgba(0, 0, 0, 1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255, 255, 255);
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
}

.about p {
    color: rgba(0, 0, 0, 1);
    font-size: 24px;
    text-align: center;
}

.main {
    background-color: rgba(0, 0, 0, .5);
}
    <div class=header>
    <a href="index.html">
        <img src="Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;">
    </a>
    <ul class="nav">
        <li><a href="index.html" style="color:white;">Home</a></li>
        <li><a href="music.html" style="color:white;">Music</a></li>
        <li><a href="beats.html" style="color:white;">Beats</a></li>
    </ul>
</div>
<!-- End of Header -->

<div class=main>
    <div class=music>

        <h1>Latest Tracks</h1>

        <iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
    </div>
    <!-- End of Music -->
    <div class=connect>
        <h1>Connect</h1>
        <div class=connectList>
            <ul>
                <a href="https://www.instagram.com/blubeats/" target="_blank">
                    <li><img src="Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li>
                </a>

                <a href="https://soundcloud.com/blubeatsmusic/" target="_blank">
                    <li><img src="Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li>
                </a>

                <a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank">
                    <li><img src="Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li>
                </a>

            </ul>
        </div>
        <!-- End of connectList -->
    </div>
    <!--End of connect -->
    <footer>
        <h1>Contact</h1>
        <ul>
            <li>Email: blubeatsmusic@gmail.com </li>
        </ul>
    </footer>
    <!-- End of Footer -->
</div>
<!-- End of Main -->