Why do i keep getting horizontal scrollbar, when i set margin and padding as 0 in the body element?

So I'm practicing my html and CSS trying to remake the google homepage however I keep getting horizontal scrollbar when i set the width of any element to 100%. Note I have set default margin and padding to zero in the body tag. Here's the html:

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  background-color: white;
  color: black;
  font-weight: 400;
  font-size: 18px;
}

.navbar{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
}

a {
  text-decoration: none;
  color: black;
  margin: 5px;
}

a:hover{
  opacity: 70%;
}

.main-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  width: 100vw;
  height: 100vh;
}

.logo{
  width: 30%;
  height: 10vw;
}

.logo img{
  width: 100%;
  height:100%;
}

.form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  position: fixed;
}
<!DOCTYPE html>
<html>
<head>
  <title>Google</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <a href="#">Gmail</a>
    <a href="#">Images</a>
    <a href="#"></a>
    <a href="#"></a>
  </nav>
  <main class="main-content">
    <div class="logo">
      <img src="1.png">
    </div>
    <div class="form">
      <input type="text" name="">
      <div class="btn">
        <button>Google Search</button>
        <button>I'm Feeling Lucky</button>
      </div>
    </div>
  </main>
  <footer>
    <div>
      <a href="">Advertising</a>
      <a href="">Business</a>
      <a href="">About</a>
      <a href="">How it works</a>
    </div>
    <div>
    <a href="">Privacy</a>
    <a href="">Terms</a>
    <a href="">Settings</a>
    </div>
  </footer>
</body>
</html>

Please note I'm a beginner and the project is still incomplete.



Read more here: https://stackoverflow.com/questions/65727997/why-do-i-keep-getting-horizontal-scrollbar-when-i-set-margin-and-padding-as-0-i

Content Attribution

This content was originally published by Frank Imade at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: