How to get rid of a white outline around header?

May 18, 2022

I created a header with <div></div> in html, but when I tested it there is a white outline around header. I created header in <head></head>.
Image of header: header

HTML code of my site:

    .header {
      padding: 20px;
      text-align: left;
      background-color: skyblue;
      color: white;
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }

<!DOCTYPE html>
<html>
<title>
  NetPlat
</title>

<head>


  <div class="header">
    <a href="login.php">
      <button style="float: right;">Logout</button>
    </a>
    <h1>Home Page</h1>
  </div>
  <style>

  </style>

</head>

<body>

</body>

</html>

>Solution :

This is something related to default browser styles. Basically, it is a set of styles that are added by the browser to the pages. A simple solution is to reset the margin, padding, and box-sizing like the following snippet:

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

But for a larger scale website, I do suggest using josh wcomeau reset code snippet:

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

Related Links:

josh advanced reset styles