1

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.

lawrence-witt
  • 8,094
  • 3
  • 13
  • 32
Frank Imade
  • 63
  • 6
  • Does your `html` tag have 0 padding and margin? Make sure your elements that are set to `width: 100%` also aren't taking up any space, use the CSS inspector in your browser when you open "Inspect Element" to see the element properties and why it takes up more than the full space. – Da Mahdi03 Jan 14 '21 at 23:06

2 Answers2

3

The problem is the width: 100vw for .main-content: There is a vertical scrollbar, but 100vw means the complete width of the window including the vertical scrollbar. But that doesn't fit into the visible part left of the scrollbar - that's why the horizontal scrollbar appears - I know, that's strange...

But you can solve it by using width: 100% for that element, instead of 100vw.

I had a similar problem some time ago - see this question of mine to read about it in more detail: Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

Your main-content element is set to width: 100vw. This does not take into account the vertical scroll bar on the side, so it is too wide. To solve this, use width: 100% instead.

Combobulated
  • 148
  • 2
  • 13