Shows white margin at the end of webpage body . How to remove that?-CodePudding

/* styles the viewport */
*{
  margin: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

/* styles the class hero */
.hero{
  background-color: #1d2026;
  min-height: 100vh;
  width:100%;
  color:#fff;
  position: relative;
}

/* navbar */
nav{
  display: flex;
  text-align: center;
  padding: 25px 8%;
}

/* navbar-menu */
nav .menu-img{
  width: 30px;
  height: 28px;
  margin-right: 20px;
  margin-top: 8px;
  cursor: pointer;   /*tells us the mouse pointer that the content is a link */
}

nav .logo-img{
  width: 170px;
  height: 40px;
  cursor: pointer;     /*tells us the mouse pointer that the content is a link */
}


nav ul{
  flex: 1;
  text-align: right;
  display: inline-block;
  padding-top:10px;

}

nav ul li{
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  text-decoration: none;

}

/* accesing the anchor tags of lists in class right-navbar-part */
nav ul li a{
  text-decoration: none;
  color: #fff;
}

/* designing button */

button{
  background: #efefef;
  height: 28px;
  width: 65px;
  border-radius:30px;
  outline: 0;
  border: 0;
  cursor:pointer;
  margin-top:8px;
}

/* creating a circle inside button */

button span{
  display: block;
  border-radius: 55%;
  background-color: lightgreen;
  height: 27px;
  width: 30px;
}

/* Lamp and light positioning */

.lamp-container{
  position: absolute;    /*this part of div can be placed anywhere in the screen as it has pos:absolute*/
  top:-20px;            /*to move the lamp more upwards--some top part of the lamp goes out of viewport*/
  left: 22%;
  width: 200px;
}

.lamp{
  width: 100%;
}
.light{
  position: absolute;
  top:97%;
  left: 50%;
  width: 700px;
  transform: translateX(-51.3%);

}

/* written text */

.written-text{
  max-width:600px;
  margin-top: 7%;
  margin-left: 50%;
}

.written-text h1{
  font-size:80px;
  font-weight: 400;
}

/* Check All Collections button */

.written-text a{
  text-decoration:none;
  background: #00986f;
  padding: 14px 40px;
  display: inline-block;
  margin-top: 40px;
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Magical Lamp Website</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div >
    <nav>
      <div >
        <img src="images/menu.png" class=menu-img alt="menu_image">
        <img src="images/logo.png" class=logo-img alt="logo_image">
      </div>
        <ul>
          <li><a href="#">Latest</a></li>
          <li><a href="#">Modern</a></li>
          <li><a href="#">Contemporary</a></li>
          <li><a href="#">Affordable</a></li>
        </ul>
        <button type="button"  name="button"><span></span></button>
    </nav>
    <div >
      <img src="images/lamp.png"  alt="lamp image">
      <img src="images/light.png"  alt="light image">
    </div>
    <div >
      <h1>Latest<br />in Lightning</h1>
      <p>This is the first lamp from our company,we're making a huge collection of<br />modern lamps in all categories from home use to office use</p>
      <a href="#">Check All Collections</a>
    </div>
  </div>

</body>

</html>

I am getting a small white margin at the end of the webpage.Due to which i can even scroll a little down in the webpage. But I am unable to understand why I am getting that white margin at the end.?

I want the color of the body to be in the whole webpage.

This is the webpage picture. You can see a small white margin at the bottom.

CodePudding user response：

Because you have to from media query and overflow for body use In order not to overflow and to be responsive

/* styles the viewport */
*{
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
  }
  body {
    overflow: hidden;
  }
  /* styles the class hero */
  .hero{
    background-color: #1d2026;
    min-height: 100vh;
    width:100%;
    color:#fff;
    position: relative;
  }
  
  /* navbar */
  nav{
    display: flex;
    text-align: center;
    padding: 25px 8%;
  }
  
  /* navbar-menu */
  nav .menu-img{
    width: 30px;
    height: 28px;
    margin-right: 20px;
    margin-top: 8px;
    cursor: pointer;   /*tells us the mouse pointer that the content is a link */
  }
  
  nav .logo-img{
    width: 170px;
    height: 40px;
    cursor: pointer;     /*tells us the mouse pointer that the content is a link */
  }
  
  
  nav ul{
    flex: 1;
    text-align: right;
    display: inline-block;
    padding-top:10px;
  
  }
  
  nav ul li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    text-decoration: none;
  
  }
  
  /* accesing the anchor tags of lists in class right-navbar-part */
  nav ul li a{
    text-decoration: none;
    color: #fff;
  }
  
  /* designing button */
  
  button{
    background: #efefef;
    height: 28px;
    width: 65px;
    border-radius:30px;
    outline: 0;
    border: 0;
    cursor:pointer;
    margin-top:8px;
  }
  
  /* creating a circle inside button */
  
  button span{
    display: block;
    border-radius: 55%;
    background-color: lightgreen;
    height: 27px;
    width: 30px;
  }
  
  /* Lamp and light positioning */
  
  .lamp-container{   /*this part of div can be placed anywhere in the screen as it has pos:absolute*/
    top:-20px;            /*to move the lamp more upwards--some top part of the lamp goes out of viewport*/
    left: 22%;
    width: 200px;
  }
  
  .lamp{
    width: 100%;
  }
  .light{
    position: absolute;
    top:97%;
    left: 50%;
    width: 700px;
    transform: translateX(-51.3%);
  
  }
  
  /* written text */
  
  .written-text{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .written-text h1{
    font-size:80px;
    font-weight: 400;
    text-align: left;
  }
  
  /* Check All Collections button */
  
  .written-text a{
    text-decoration:none;
    background: #00986f;
    padding: 14px 40px;
    display: inline-block;
    margin-top: 40px;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    text-align: left;
  }

  @media screen and (max-width: 540px) {
    .written-text h1{
        font-size: 32px;
        font-weight: 400;
    }
     .written-text a{
    text-decoration:none;
    background: #00986f;
    padding: 7px 20px;
    display: inline-block;
    margin-top: 40px;
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
  }
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Magical Lamp Website</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div >
    <nav>
      <div >
        <img src="images/menu.png" class=menu-img alt="menu_image">
        <img src="images/logo.png" class=logo-img alt="logo_image">
      </div>
        <ul>
          <li><a href="#">Latest</a></li>
          <li><a href="#">Modern</a></li>
          <li><a href="#">Contemporary</a></li>
          <li><a href="#">Affordable</a></li>
        </ul>
        <button type="button"  name="button"><span></span></button>
    </nav>
    <div >
      <img src="images/lamp.png"  alt="lamp image">
      <img src="images/light.png"  alt="light image">
    </div>
    <div >
      <h1>Latest<br />in Lightning</h1>
      <p>This is the first lamp from our company,we're making a huge collection of<br />modern lamps in all categories from home use to office use</p>
      <a href="#">Check All Collections</a>
    </div>
  </div>

</body>

</html>

CodePudding user response：

Some component is overflowing Make sure your body is set to 100%, then you can put percentages on it's children

body {
    margin: 0px;
    width: 100%;
    padding: 0px;
}

If you use padding make sure to rest that from the percentage like this:

.something {
  padding: 20px;
  width: calc(100% - 40px);
}