0

Not sure where the problem is with my header bar, I'm new to HTML, I'm following a tutorial from w3schools but when I create a header bar, there's a white border around the black header, on the example they give there isn't, not sure why this happens. I've copied all the relevant bits from the tutorial.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
</head>

<style>
    html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>

<body>
    <div class="header">
        <a class="header-left" href="#">Home</a>
        <div class="header-right">
            <a href="#">Blog</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>
</body>
</html>

CSS:

.header {overflow:hidden;background-color:#000;padding:10px;}
.header a {color:#fff;text-align:center;text-decoration:none;font-size:20px;padding:10px;}
.header-left {float:left;}
.header-right {float:right;}

Page that's being displayed, there's a border around the black header

Jordan109241
  • 3
  • 1

1 Answers1

0

Please add

 html, body {margin:0; padding:0;}

.header {overflow:hidden;background-color:#000;padding:10px;brder:none;}
.header a {color:#fff;text-align:center;text-decoration:none;font-size:20px;padding:10px;}
.header-left {float:left;}
.header-right {float:right;}

in your css at top

Dr Manish Lataa-Manohar Joshi
  • 2,380
  • 5
  • 17
  • 38