0

Im new to all this html website building and working on a fast food website. I want to make a "Home" "Menu" and "Contact" List on the top of my website but I cant seem to fix the margin/padding

Picture of my website

<!DOCTYPE html>
<head>
    <title>McBuggaKing</title>
    <style>
        body {
            background: grey;
            color: yellow;
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            margin: 0;
            padding: 0;
            background: green;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
            margin: 0 20 0 0;
        }

        section {
            margin: 0;
            padding: 0;
        }

        Footer {
            Color: White
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home </a></li>
                <li><a href="meny.html">Menu </a></li>
            </ul>
        </nav>
    </header>
    <section>
       <h1>Welcome to McBuggaKing.</h1> 
       <h4>We got all the buggas u need</h4>
    </section>
        <section> 
        <div> Chessbugga </div>
        <div> Fryz </div>
        <div> Popping Soda </div>
        </section>
        <footer>Copyright Floffy</footer>
</body>
</html>

This is my very simple website I have searched up on the internet and yt but can't seem to find the problem.

ObscurusLux
  • 370
  • 3
  • 14
Florian Olthuis
  • 1
  • Is your template loaded through any platform (eg. WordPress or something else), or it's a standalone html/css page? ... cause it may be inheriting some css from somewhere! – Fisnik Tahiri Feb 01 '21 at 14:52

4 Answers4

1

Just add margin: 0; to ul element.

<head>
    <title>McBuggaKing</title>
    <style>
        body {
            background: grey;
            color: yellow;
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            margin: 0;
            padding: 0;
            background: green;
        }

        ul {
            list-style-type: none;
            margin: 0;
        }

        li {
            display: inline-block;
            margin: 0 0 0 0;
        }

        section {
            margin: 0;
            padding: 0;
        }

        Footer {
            Color: White
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home </a></li>
                <li><a href="meny.html">Menu </a></li>
            </ul>
        </nav>
    </header>
    <section>
       <h1>Welcome to McBuggaKing.</h1> 
       <h4>We got all the buggas u need</h4>
    </section>
        <section> 
        <div> Chessbugga </div>
        <div> Fryz </div>
        <div> Popping Soda </div>
        </section>
        <footer>Copyright Floffy</footer>
</body>
</html>
Shahram
  • 300
  • 1
  • 7
1

That could be a (browser) default margin from one of the child elements which goes out of the parent ("collapsing margins" phenomenon). So I would try to add

nav, ul {
  margin-top: 0;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

One thing that many people do when starting a project is to reset the margins, doing something like this:

*{
border-box: box-sizing;
padding: 0;
maring: 0;
}

But specific in your case, you have to remove the ul margin. You can do this:

ul {
    margin-top: 0;
    list-style-type: none;
}
LucasSousa
  • 136
  • 1
0

I was able to get rid of the grey line at the top of the website by resetting the margin and padding for all elements to 0 by adding the code below to your stylesheet.

        *{
              padding: 0;
              margin: 0;
           }
Cynthia Omovoiye
  • 1
  • 1