Search code examples
htmlcssborder

Remove border gap in HTML doc

I am learning HTML, and I've created a dead-simple page with a header bar, but there is a gap between the header and the sides & top of the page for some reason, shown in the image below:

enter image description here

Is there a way to remove this? Code:`<!doctype html>

<style>

    html {
        background: url('background.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding-top: 10px;
        padding-left: 800px;
        overflow: hidden;
        background-color: rgba(0,0,0,.3);
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: grey;
        text-align: center;
        padding: 14px 24px;
        text-decoration: none;
        font-size: 20px;
        font-weight: lighter;
        font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    }

    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111;
    }


</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<ul>
    <li><a href="default">Home</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
</ul>
`
Solution

  • Add this to your CSS

    *{
  margin: 0;
  padding: 0
}