How to remove space between the edge of the page and div

Question

(This is my first post) (EDIT: I forgot to add the picture) https://i.stack.imgur.com/VQhrP.png

I literally just started a website and I found this annoying white space between the edge of the page and the div. How do I get rid of it?

This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <style>
        #navbar{
            background-color: #ff5e5e;
            height: 3rem;
            top: 0px;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div id="navbar">dddas</div>

    <script src="index.js"></script>
</body>
</html>

score 1 · Answer 1 · answered Feb 20 '22 at 18:50

Use the universal selector to make the margin and padding 0 and it works. When you do it for just the navbar, it just affects the content in the navbar relative to the navbar itself. Also id recommend using external style sheets, not necessary but it makes everything look way easier.



* {
    padding: 0;
    margin: 0;
}

You can do this separately from your navbar styles.

How to remove space between the edge of the page and div

1 Answers1