gaps on left side of div element

Question

I have tried margin and padding both at 0 and it still has a gap on the left side.

I have tried 0 on padding and that tends to make my bar too skinny for my taste and still doesn't fix the fact gap on the left. I can't seem to find a place that says to do anything other than padding 0; and margin 0; so I am kind of at a loss. and it's probably that I just completely overlooked.

The javascript to make my header move up and down with my page then lock to the top

 window.onscroll = function() { getsticky() }; var header = document.getElementById('myHeader'); var sticky = header.offsetTop; function getsticky() { if (window.pageYOffset > sticky) { header.classList.add('sticky'); } else { header.classList.remove('sticky'); } }

 .header { background-color: #141414; padding: 10px 16px; border-radius: 5px; width: 100%; margin: 0; border-right: 0; } .sticky { position: fixed; top: 0; width: 100%; } .Buttons { background-color: #141414; border: none; color: white; font-size: larger; font-weight: bold; padding: 20px 24px text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px } a { color: white; text-decoration: none; }

 <div class='header' id="myHeader"> <H2><button class="Buttons"><a href = 'Pricing.html'>Pricing!</a></button> <button class="Buttons"><a href = 'About me.html'>About me</a></button> <button class="Buttons"><a href = 'placeholder.html'>Contact me!</a></button> </H2> </div> <div style="height:2000px"> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> </div>

Answer 1

Maybe your problem is this.

 body{
   margin:0!important
 }

 window.onscroll = function() { getsticky() }; var header = document.getElementById('myHeader'); var sticky = header.offsetTop; function getsticky() { if (window.pageYOffset > sticky) { header.classList.add('sticky'); } else { header.classList.remove('sticky'); } }

 body { margin: 0!important } .header { background-color: #141414; padding: 10px 16px; border-radius: 5px; width: 100%; margin: 0; border-right: 0; } .sticky { position: fixed; top: 0; width: 100%; } .Buttons { background-color: #141414; border: none; color: white; font-size: larger; font-weight: bold; padding: 20px 24px text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px } a { color: white; text-decoration: none; }

 <div class='header' id="myHeader"> <H2><button class="Buttons"><a href = 'Pricing.html'>Pricing!</a></button> <button class="Buttons"><a href = 'About me.html'>About me</a></button> <button class="Buttons"><a href = 'placeholder.html'>Contact me!</a></button> </H2> </div> <div style="height:2000px"> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> <p>Scroll</p> </div>

Answer 2

As Lubo Masura explained, the reason of your issue is the margin automatically set on the body of an html element.

I made a demo you can find here: https://codesandbox.io/s/stupefied-wilson-92657?file=/index.html

I changed the background of the links to blue just so you can see where the links are.

To notice I updated both your markup and styles to simplify it, as there were a couple of things which could have been improved:

• Best practice to always name your classes with the first letter as lowercase
• Try avoiding links nested inside buttons, they are not necessary, mostly in this case scenario
• If you want to add the h2 on the links, do it for each link and not one that includes all of them (for SEO practices)
• Try being minimalist with the styles you use; If they are not needed, don't use them to make your code cleaner and easier to understand