white space on right and bottom side of webpage

Question

 window.sr = ScrollReveal(); sr.reveal('.b1', { duration: 2000, origin: 'top', distance: '80px' }); sr.reveal('.b2', { duration: 1500, origin: 'top', distance: '80px' }) sr.reveal('.b3', { duration: 1000, origin: 'top', distance: '80px' }); sr.reveal('.w1', { duration: 3000, origin: 'right', distance: '200px' }); sr.reveal('.w2', { duration: 3500, origin: 'right', distance: '150px' }); sr.reveal('.w3', { duration: 4000, origin: 'right', distance: '150px' }); sr.reveal('.h2-about', { duration: 2000, origin: 'top', distance: '150px' }); sr.reveal('.left', { duration: 2000, origin: 'bottom', distance: '150px' }); sr.reveal('.right', { duration: 2000, origin: 'bottom', distance: '150px' }); const navBtn = document.querySelector('.menu-bars'); const x = document.querySelector('.fa-times'); const b1 = document.querySelector('.b1'); const b2 = document.querySelector('.b2'); const b3 = document.querySelector('.b3'); const sideMenu = document.querySelector('.side-menu'); navBtn.addEventListener('click', () => { x.style.left = '338px'; sideMenu.style.left = '0px'; addAnimation(b1); addAnimation(b2); addAnimation(b3); function addAnimation(bar) { bar.style.animationName = bar.className + '-animate'; } }); const aboutDiv = document.querySelector('.about-us'); aboutDiv.addEventListener('mouseover', () => { const line = document.querySelector('.underline'); line.style.animationName = 'line'; }) x.addEventListener('click', ()=> { sideMenu.style.left = '-400px'; x.style.left = '-400px'; }) 

 html, body { margin: 0; padding: 0; } .side-menu { position: fixed; top: 165px; background-color: white; width: 299.5px; padding: 10px; transition: all 2s ease; left: -400px; transition: all 0.2s ease; z-index: 11; } .fa-times { font-size: 30px; position: fixed; color: white; left: -338px; top: 168px; transition: all 0.2s ease; z-index: 11; } .fa-times:hover { transform: scale(1.2); } .side-menu ul { list-style-type: none; text-align: center; } .side-menu li { color: grey; font-size: 1.8rem; margin: 6px; margin-left: -35px; margin-bottom: 35px; font-family: 'Josefin sans'; } .side-menu li:hover { color: orange; cursor: pointer; } .menu-bars{ position: fixed; left: 50px; top: 80px; z-index: 11; } .b1, .b2, .b3 { position: relative; width: 60px; height: 7px; background-color: red; margin:.55rem; left: 0px; top: 0px; border-radius: 9px; } .b1 { background-color: lightgreen; animation-duration: 0.2s; animation-fill-mode: forwards; animation-direction: backwards; } .b2 { background-color: white; animation-duration: 0.2s; animation-fill-mode: forwards; } .b3 { background-color: #ff4d4d; animation-duration: 0.2s; animation-fill-mode: forwards; } @keyframes b1-animate { from {} to { width: 60px; height: 8px; position: relative; left: -67px; top: 49px; width: 100px; border-radius: 0; background-color: lightgreen;} } @keyframes b2-animate { from {} to {width: 60px; height: 8px; position: relative; left: 33px; top: 32.5px; width: 150px; height: 7.75px; border-radius: 0; background-color: white;} } @keyframes b3-animate { from {} to {width: 60px; height: 8px; position: relative; top: 16px; left: 161px; width: 100px; border-radius: 0; background-color: #ff4d4d;} } .intro { background: darkblue; width: 100vw; height: 100vh; background-attachment: fixed; background-size: cover; margin-bottom: 0; } h1 { font-family: 'Cedarville Cursive'; position: absolute; left: 700px; top: 50px; color: white; font-size: 3rem; } h2 { text-align: center; font-family: 'Cedarville Cursive'; font-size: 3rem; padding: 30px; color: white; } .about-us { margin-top: -40px; padding-bottom: 90px; background-color: #339966; width: 100vw; } .underline { margin: 0; position: absolute; left: 570px; bottom: -120px; background-color: orange; width: 0px; height: 3px; animation-duration: 0.7s; animation-fill-mode: forwards; transition-timing-function: ease-out; } @keyframes line { from {left: 370px; width: 0px;} to {left: 580px; width: 210px; border-radius: 1.5px;} } p { position: relative; padding-left: 20px; top: -30px; color : white; font-size: 1.8rem; word-spacing: 7px; width: 400px; font-family: 'Josefin sans'; margin-left: 155px; } .fa-caret-down { position: relative; width: 50px; height: 50px; font-size: 60px; color: lightgrey; left: 665px; bottom: 300px; transform: rotate(90deg); transition: all 0.5s ease; } .fa-caret-down:hover { color: white; } .image-slider { background-color: darkgrey; position: relative; width: 440px; height: 350px; right: -710px; bottom: 500px; } .right { position: relative; width: 50px; height: 50px; font-size: 60px; color: lightgrey; left: 1145px; bottom: 715px; transform: rotate(-90deg); transition: all 0.5s ease; } .right:hover { color: white; } .side-msg { font-family: 'Cedarville Cursive'; font-size: 3rem; color:#e6ac00; position: relative; right: -550px; font-weight: bold; top: -560px; width: 1000px; } .chile { width: 460px; height: 345px; position: relative; top: 800px; right: 0px z-index: 11; } .menu-wrapper { width: 100VW; background-color: #e6ac00; height: 905px; position: relative; top: -720px; clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%); } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>El Metate | Mexican food</title> <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/scrollreveal"></script> </head> <body> <header> <nav> <div class="side-menu"> <ul> <li>Home</li> <li>About</li> <li>Menu</li> <li>Contact</li> <li>Location</li> <li>News</li> </ul> </div> <i class="fas fa-times"></i> <div class="menu-bars"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </div> </nav> <div class="intro"> <h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1> </div> </header> <section class="about"> <div class="about-us"> <h2 class="h2-about">About Us</h2> <div class="underline"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p> <i class="fas fa-caret-down left"></i> <div class="image-slider">p</div> <i class="fas fa-caret-down right"></i> <p class="side-msg">Taking you back to Mexico</p> </div> </section> <section class="menu"> <div class="menu-wrapper"></div> </section> <script src="script.js"></script> </body> </html> 

Hey Guy's I'm working on a website for a local buisness and I've just noticed some huge whitespace on the right and bottom side of the screen. my html and body's margin are set to zero? This wasn't always there. It popped up while i was working, i didnt even notice it till now and can't figure it out. Any help would be awesome. Thanks!

Answer 1

The element with the class of .side-msg has a width of 1000px which is causing the unwanted whitespace. If you remove it the space should disappear.