How To Remove This White Border/Margin In HTML/Css

Question

I am learning HTML/CSS and while i was trying to make a sample site i am getting a white border on top of the website.

Screenshot Of The Problem : https://prnt.sc/ihop0m

body {
     margin:0;
    }
    header{
     background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(bg.jpg);
     height: 100vh;
     background-size: cover;
    }
    ul.main-nav
    {
     float: right;
     text-transform: uppercase;
     list-style: none;
    }
    ul.main-nav li
    {
     display: inline-block;
    }
    ul.main-nav a
    {
     color: white;
     font-size: 17px;
     padding: 5px 20px;
     text-decoration: none;
     font-family: "roboto",sans-serif;
    }
    ul.main-nav li.active a{
     
     border: 1px solid darkorange;
    }
    ul.main-nav li a:hover
    {
     border: 1px solid darkorange;
    }
    
    .logo img
    {
     width: 100px;
     height: auto;
        float: left; 
    }
    div.row
    {
     max-width: 1200px;
     margin:auto;
    }
    div.hero
    {
     position: absolute;
    }
    
    h1
    {
     font-size: 70px;
     font-family: "roboto";
     text-align: center;
     color: white;
     padding: 250px;
     }

<html>
    <heah>
     <title>Business Website</title>
     <link rel="stylesheet" type="text/css" href="style.css">
    </heah>
    <body>
     <header>
      <div class="logo">
       <img src="LOL_Face.png">
      </div>
      <div class="row">
       <ul class="main-nav">
        <li><a href="">HOME</a></li>
        <li><a href="">SERVICES</a></li>
        <li><a href="">CONTACT</a></li>
        <li><a href="">NEWS</a></li>
        <li><a href="">FAQ</a></li>
          </ul>
      </div>
      <div class="hero"></div>
     <h1> ARE YOU READY?</h1>
     </header>
      
    </body>

I think the problem must be in the css !

Options I Tried :

1) margin: 0;

Please Let me Know !

margin-collpasing between h1 and header .. as you are not clearing the float properly — Temani Afif, Feb 21 '18 at 08:09
@PatrickMlr not sure this is the suitable solution ... he need to clear floating because the issue is not only with margin but with container that contains float element are collapsing — Temani Afif, Feb 21 '18 at 08:14

score -3 · Answer 1 · answered Feb 21 '18 at 08:08

Try using padding: 0 in your header tag. Also, worth to take a look at your browser debug section. Press F12 and it will open a window where you can inspect and analyze the HTML/CSS/javascript you're using. Really helpful when you want to test some changes without refreshing the page.

How To Remove This White Border/Margin In HTML/Css

1 Answers1