1

I was working an a website when I stopped and noticed there was a horizontal scroll bar. It looked as though something was jolting out to the right but I couldn't find any thing with my devtools. So I started commenting out my html and css in sections starting from the bottom to see exactly when and where the scroll bar is added. And its on line 43 in the html. It's a h1 element, and once removed the scroll bar goes away?? Why is this happening?

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
 ham.classList.add('ham-open');
 menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
 ham.classList.remove('ham-open');
 menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();

sr.reveal('.info', {
 duration: 2000,
 origin: 'bottom'
})
html, body {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.header {
 background: black;
 width: 100vw;
 height: 100vh;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 display: flex;
}

.nav-wrap {
 flex-basis: 40%;
}

.nav-wrap i {
 color: white;
 font-size: 2rem;
 position: absolute;
 right: -33px;
 top: 0px;
 transition: all .1s ease;
}

.nav-wrap i:hover {
 cursor: pointer;
 transform: scale(1.15);
}

.nav-box {
 margin-left: 50px;
 margin-top: 100px;
 max-width: 70px;
 cursor: pointer;
 position: fixed;
 z-index: 10;
}

.b1, .b2, .b3 {
 width: 70px;
 height: 8.5px;
 border-radius: 5px;
 background-color: #fff;
 margin-bottom: 10px;
 transition: all .15s ease;
}

.b1 {
 background-color: #56ff47;
}

.b3 {
 background-color: #ff4c4c;
}

.ham-open .b1 {
 background-color: #56ff47;
 transform: translateY(100px);
 position: relative;
 z-index: 1;
}

.ham-open .b2 {
 transform: translateY(81.5px);
 width: 110px;
 position: relative;
 left: 60px;
 z-index: 0;
}

.ham-open .b3 {
 background-color: #ff4c4c;
 transform: translateY(63px);
 width: 140px;
 position: relative;
 left: 160px;
 z-index: 2;
}

.menu {
 display: flex;
 border-left: 8px solid #56ff47;
 flex-direction: column;
 background-color: #fff;
 margin-left: -700px;
 width: 292px;
 padding-top: 10px;
 padding-bottom: 10px;
 position: fixed;
 border-radius: 5px;
 top: 225px;
 transition: all .15s;
 z-index: 10;
}

.menu a {
 text-decoration: none;
 color: limegreen;
 font-family: 'Kumar One Outline';
 font-size: 2.3rem;
 text-align: center;
 margin-top: 12px;
 margin-bottom: 12px;
 transition: all .5s ease;
}

a:hover {
 color: #007001;
}

.info-wrap {
 flex-basis: 60%;
}

.info {
 font-family: 'Cedarville Cursive';
 color: white;
 font-weight: bold;
 font-size: 4.5rem;
 text-align: center;
 margin-top: 60px;
}

.logo-wrap {
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.logo-wrap div {
 font-family: 'Staatliches';
 color: white;
 font-size: 13rem;
 font-weight: bold;
 letter-spacing: 10px;
 margin-bottom: -5rem;
 position: relative;
 margin-left: auto;
 margin-right: auto;

}



/*------ABOUT------*/



/*.about-section {
 background-color: #17a832;
 width: 100vw;
}*/

/*.about-section h1 {
 text-align: center;
 font-size: 4.5rem;
 margin-top: 0;
 margin-bottom: 30px;
 padding-top: 15px;
 color: white;
 font-family: 'Cedarville Cursive';
 font-weight: bold;
}

.about-wrap {
 display: flex;
 padding-bottom: 150px;
}

.about-info, .image-slider-wrap {
 flex-basis: 50%;
}

.about-info p {
 color: white;
 font-family: 'Josefin Sans';
 font-size: 2rem;
 margin-left: 100px;
 margin-bottom: 0;
 margin-top: 0;
}

.image-slider {
 width: 650px;
 height: 400px;
 background-color: red;
 border-radius: 13px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
}

.image-slider i {
 color: white;
 font-size: 5rem;
 position: absolute;
 top: 50%;
 margin-top: -40px;
 transition: all .1s ease;
 cursor: pointer;
}

#left {
 transform: rotate(-90deg);
 left: -30px;
}

#right {
 transform: rotate(90deg);
 right: -30px;
}

#left:hover {
 transform: rotate(-90deg) scale(1.3);
}

#right:hover {
 transform: rotate(90deg) scale(1.3);
}
*/

/*------MENU------*/


/*.menu-section {
 background-color: #edb12f;
 display: flex;
 width: 100vw;
 top: -60px;
 position: relative;
 clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}

.menu-section h1 {
 font-size: 9.5rem;
 margin-top: 0;
 position: absolute;
 left: 100px;
 margin-bottom: 60px;
 padding-top: 15px;
 color: white;
 font-family: 'Cedarville Cursive';
 font-weight: bold; 
}

.column-left, .column-right, .column-middle {
 flex-basis: 33.33%;
 margin-top: 230px;
 outline: 1px solid green;
}

.column-left {
 display: flex;
 justify-content: flex-end;
}

.column-left .menu-h2:after {
 display: block;
 content: "beans and rice included";
 color: white;
 font-size: 1.5rem;
 font-family: 'Josefin Sans';
 margin-top: -25px;
}

.column-middle h2:after, .column-right h2:after {
 content: "";
 display: block;
 width: 100%;
 height: 3px;
 background-color: white;
 border-radius: 3px;
 margin-top: -25px;
}

.column-middle {
 display: flex;
 justify-content: center;
}

.column-right {
 display: flex;
 justify-content: flex-start;
}

.column {
 outline: 1px solid green;
 min-width: 420px;
 display: flex;
 flex-direction: column;
}

.column h2 {
 display: inline-block;
 align-self: center;
 font-family: 'Cedarville Cursive';
 color: #17a832;
 font-size: 3rem;
}

.row {
 font-family: 'Josefin Sans';
 font-size: 1.5rem;
}

.row div {
 display: flex;
 justify-content: space-between;
}

.menu-h2 {
 text-align: center;
}*/

/*.design-left, .design-right {
 position: absolute;
}*/

/*.design-right {
 right: 0;
 transform: rotate(180deg);
}*/

/*.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent; 
    border-left: 70px solid green;
  position: relative;
  top: -16px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;  
  border-right:70px solid limegreen;
  position: relative;
  top: 20px; 
}

.arrow-top {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent; 
    border-left: 70px solid #20a04b;
  position: relative;
  top: -121px;
  left: 70px;
}

.top-middle {
 position: relative;
 top: -130px;
}

.bottom-middle .arrow-left {
 top: -40px;
}

.bottom-middle .move {
 top: -75px;
}

.bottom {
 position: relative;
 top: -48px;
}

.bottom .arrow-left {
 top: -50px;
}*/


/*------HOURS------*/

/*.hours-section {
 background-color: green;
 width: 100vw;
 height: 100px;
}*/
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Mexican Restaurant</title>
 <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
  <div class="header">
   <div class="nav-wrap">
    <div class="nav-box">
     <div class="b1"></div>
     <div class="b2"></div>
     <div class="b3"></div>
    </div>

    <div class="menu">
     <a href="#">Home</a>
     <a href="#">About</a>
     <a href="#">Menu</a>
     <a href="#">Hours</a>
     <a href="#">Contact</a>
     <a href="#">Location</a>
     <i class="fas fa-times" id="menu-close"></i>
    </div>
   </div>
   <div class="info-wrap">
    <p class="info">Authentic Mexican Food</p>

    <div class="logo-wrap">
     <div>YOUR</div>
     <div>LOGO</div>
     <div>HERE</div>
    </div>
   </div>
  </div>
 </header>
 <main>
  <div class="about-section"> 
   <h1 class="about-h1">About Us</h1>
  </div>

 </main>
 <footer>
  
 </footer>
  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="script.js"></script>
</body>
</html>
connexo
  • 53,704
  • 14
  • 91
  • 128
Alfred
  • 245
  • 1
  • 2
  • 13
  • Do you have a live example? I don't see the scrollbar in your code snippet. – Sjors May 17 '19 at 21:45
  • Really? I see it. Here's an image of it in the snippet https://imgur.com/a/yYc0sNL – Alfred May 17 '19 at 22:01
  • Nope, also tried adding it to a jsFiddle but no horizontal scrollbar for me – Sjors May 17 '19 at 22:05
  • 1
    The `h1` looks fine to me. The scrollbar I get is caused by `.header` having a width of `100vw` which creates a horizontal bar when the screen has overflow. – Shikkediel May 17 '19 at 22:17
  • Possible duplicate of [100vw causing horizontal overflow, but only if more than one?](https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one) – showdev May 17 '19 at 22:22
  • The vertical scroll bar makes `width:100vw` introduce a horizontal scroll bar. – showdev May 17 '19 at 22:24
  • Also see [viewport-percentage lengths](https://www.w3.org/TR/css3-values/#viewport-relative-lengths): "scrollbars are assumed not to exist". – showdev May 17 '19 at 22:39
  • Yah so the 100vw; I had set on all the different sections was causing the problem. So thx @showdev. Why is this happening though? – Alfred May 18 '19 at 00:09
  • As I understand it, `vw` units assume that no scrollbars exist. So when a vertical scrollbar exists, `100vw` is actually 100% of the viewport width *plus the width of the scrollbar*. That value is wider than the page and makes a horizontal scrollbar appear. I agree with Shikkediel that, in this case, it seems you could "leave width out altogether so it reverts to the default 100%". Also see [Prevent 100vw from creating horizontal scroll](https://stackoverflow.com/questions/30489594/prevent-100vw-from-creating-horizontal-scroll/30504010#30504010). – showdev May 19 '19 at 20:42

2 Answers2

1

It's actually a problem with setting width: 100vw;. Try adding max-width: 100%; anywhere you have width: 100vw; in your CSS. So for your header as an example:

.header {
    background: black;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
}
jmalenfant
  • 303
  • 1
  • 8
0

As jmalenfant said, it's the header. The 'width: 100vw;' is fine, but you have to make sure you declare a 'max-width: 100%'. I do see margin on it that is causing the extra bit of width to be added. This in turn is adding the horizontal scrollbar. F12 and right click the far right side of the screen and inspect. If you hover over the H1 element in the dev pain you will see it.

Triston Wasik
  • 56
  • 3