White border around page doesn't go away (html, css, js)

Question

i can't seem to get rid of the white border around around the page. i tried using *, html, and body, but nothing seems to work. it might have something to do with the #main page or nav bar? i'm new to html, css and js so this might be out of my scope or not looking for the right thing. thanks in advance!

const backToTopButton = document.querySelector("#back-to-top-btn");

window.addEventListener("scroll", scrollFunction);

function scrollFunction() {
  if (window.pageYOffset > 300) { // Show backToTopButton
    if(!backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnExit");
      backToTopButton.classList.add("btnEntrance");
      backToTopButton.style.display = "block";
    }
  }
  else { // Hide backToTopButton
    if(backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnEntrance");
      backToTopButton.classList.add("btnExit");
      setTimeout(function() {
        backToTopButton.style.display = "none";
      }, 250);
    }
  }
}

backToTopButton.addEventListener("click", smoothScrollBackToTop);

// function backToTop() {
//   window.scrollTo(0, 0);
// }

function smoothScrollBackToTop() {
  const targetPosition = 0;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 750;
  let start = null;
  
  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  min-width:100%;
}

.scroll {
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  position: relative;
}

/* NAVIGATION BAR */

#main {
    width: 100%;
    height: 100%;
  background-color: green;
}

nav {
    width: 100%;
    height: 80px;
    background-color: #fff;
    line-height: 80px;
}

nav ul {
    text-align: center;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    transition: 0.8s all;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    padding: 30px;
}

nav ul li a:hover {
    color: #000;
}


/* HOME NAME */

.name {
  font-family: sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

/* TYPEWRITER EFFECT */

.css-typing {
  position: absolute;
  top: 55%;
  left: 36.5%;
  /*transform: translateX(-40%) translateY(-60%);*/
}

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.css-typing p:nth-child(1) {
  /*width: 7.3em;*/
  width: 10ch;
  -webkit-animation: type 2s steps(10, end);
  animation: type 2s steps(10, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 38ch;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 13ch;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}


/* SECTIONS */

.box {
  width: 100%;
  height: 100vh;
  padding: 70px;
  display: flex;
}

.box .imgPro {
  width: 150px;
  flex: 0 0 150px;
}

.box .imgPro img {
  width: 100%;
  padding: 10px;
  border-radius: 50%;
}

.box .content {
  padding-left: 20px;
}

.box .content h2 {
  margin: 0;
  padding-left: 0;
  padding-bottom: 20px;
  text-align: center;
}

/* BACK TO TOP BUTTON */

#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 26px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
  border: 3px solid #333;
  border-radius: 50%;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, color;
}

#back-to-top-btn:hover, #back-to-top-btn:focus {
  background-color: #333;
  color: #fff;  
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devide-width, initialpscale=1.0">
    <title> TITLE </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- link for back to top button -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> 
  </head>

<body>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
  <div class="container">
    <div id="main" class="scroll">
      <nav>
      <!-- <img src="x.png" width="200" height="80"> for top-left logo -->
        <ul>
          <li><a href="#home" class="js-anchor-link">Home</a></li><!--
          --><li><a href="#about" class="js-anchor-link">About</a></li><!--
          --><li><a href="#resume" class="js-anchor-link">Resume</a></li><!--
          --><li><a href="#portfolio" class="js-anchor-link">Portfolio</a></li><!--
          --><li><a href="#contact" class="js-anchor-link">Contact</a></li>
        </ul>
      </nav>
      <h1 class="name">TITLE</a></h1>
    </div>
    <section id="about" class="scroll"> 
      <div class="box">

        <div class="content">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus. In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p>
        </div>
      </div>
    </section>
</body>
</html>

score 2 · Accepted Answer · answered Jul 28 '20 at 22:16

_grid.scss is overriding your custom rules because the .container selector they're using is more specific than your wildcard * selector.

You can use the !important qualifier to increase your rules' priority, however be aware that this sort of convention is somewhat discouraged, and in your scenario will cause all elements to have a margin and padding of 0.

Instead, make your selector a bit more specific by changing * to body .container (see below). You should really review Specificity to ensure you understand what exactly is going on here.

const backToTopButton = document.querySelector("#back-to-top-btn");

window.addEventListener("scroll", scrollFunction);

function scrollFunction() {
  if (window.pageYOffset > 300) { // Show backToTopButton
    if(!backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnExit");
      backToTopButton.classList.add("btnEntrance");
      backToTopButton.style.display = "block";
    }
  }
  else { // Hide backToTopButton
    if(backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnEntrance");
      backToTopButton.classList.add("btnExit");
      setTimeout(function() {
        backToTopButton.style.display = "none";
      }, 250);
    }
  }
}

backToTopButton.addEventListener("click", smoothScrollBackToTop);

// function backToTop() {
//   window.scrollTo(0, 0);
// }

function smoothScrollBackToTop() {
  const targetPosition = 0;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 750;
  let start = null;
  
  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};

body .container {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  min-width:100%;
}

.scroll {
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  position: relative;
}

/* NAVIGATION BAR */

#main {
    width: 100%;
    height: 100%;
  background-color: green;
}

nav {
    width: 100%;
    height: 80px;
    background-color: #fff;
    line-height: 80px;
}

nav ul {
    text-align: center;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    transition: 0.8s all;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    padding: 30px;
}

nav ul li a:hover {
    color: #000;
}


/* HOME NAME */

.name {
  font-family: sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

/* TYPEWRITER EFFECT */

.css-typing {
  position: absolute;
  top: 55%;
  left: 36.5%;
  /*transform: translateX(-40%) translateY(-60%);*/
}

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.css-typing p:nth-child(1) {
  /*width: 7.3em;*/
  width: 10ch;
  -webkit-animation: type 2s steps(10, end);
  animation: type 2s steps(10, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 38ch;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 13ch;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}


/* SECTIONS */

.box {
  width: 100%;
  height: 100vh;
  padding: 70px;
  display: flex;
}

.box .imgPro {
  width: 150px;
  flex: 0 0 150px;
}

.box .imgPro img {
  width: 100%;
  padding: 10px;
  border-radius: 50%;
}

.box .content {
  padding-left: 20px;
}

.box .content h2 {
  margin: 0;
  padding-left: 0;
  padding-bottom: 20px;
  text-align: center;
}

/* BACK TO TOP BUTTON */

#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 26px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
  border: 3px solid #333;
  border-radius: 50%;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, color;
}

#back-to-top-btn:hover, #back-to-top-btn:focus {
  background-color: #333;
  color: #fff;  
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devide-width, initialpscale=1.0">
    <title> TITLE </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- link for back to top button -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> 
  </head>

<body>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
  <div class="container">
    <div id="main" class="scroll">
      <nav>
      <!-- <img src="x.png" width="200" height="80"> for top-left logo -->
        <ul>
          <li><a href="#home" class="js-anchor-link">Home</a></li><!--
          --><li><a href="#about" class="js-anchor-link">About</a></li><!--
          --><li><a href="#resume" class="js-anchor-link">Resume</a></li><!--
          --><li><a href="#portfolio" class="js-anchor-link">Portfolio</a></li><!--
          --><li><a href="#contact" class="js-anchor-link">Contact</a></li>
        </ul>
      </nav>
      <h1 class="name">TITLE</a></h1>
    </div>
    <section id="about" class="scroll"> 
      <div class="box">

        <div class="content">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus. In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p>
        </div>
      </div>
    </section>
</body>
</html>

black blue · Answer 2 · 2020-07-31T00:02:37.883

Css works as cascade. In your html head you have multiple .css files their order matters. First is overwritten by second, second by third.

Css works as cascade - you can set the same property many times and only the last / closest one will be assigned.

Css can be declared as:

.css file indicated in file .html section <head>
inside .css file with @import
straight declaration in section <style> (.html <head>)
inline declaration inside any tag in .html <body>

Whole css counts as follows:
the only closest one declaration is relevant (further ones become invalid).

Example:
if there are 3 files .css in <head>: a.css, b.css and c.css, and each contains declaration of <nav>, in addition one of them contains include @import "extern.css" screen and (min-width: 1000px), there is also section <style>, and <nav> tag:

a.css

nav{ padding: 10px; color: teal}
nav{ color: magenta}

b.css

nav{ margin: 0; background: red}

c.css

nav{ margin: 10px; padding: 10%; background: #def}

section <style>

nav{ height: 20vh; display: inline; background: 0}

and declaration inline

<nav style="padding: 0; background: yellow"> ... </nav>

Question: how will look like our molested <nav>?
Right answer: it depends... also truth: ugly

It depends on width of device, where exactly is @imported file and its content.

Assuming, that it has slim screen it should be:

nav{
height: 20vh;
padding: 0;
margin: 10px;
background: yellow;
color: magenta;
display: inline;
}

If it is at least 1000 pixels wide, it should be:

nav{
height: 20vh;
padding: 0;
background: yellow;
display: inline;
...?
}

Writing 'it should be' I mean literally - should, but not always is.

Trouble makers

plenty .css files,
mess and redundancy,
lack of support
hacks, vendors, inventions,
imperative '!important',
hidden somewhere @imports,
mess and redundancy,
inline declarations,
mismatched and misunderstander solutions,
misspellings,
mess and redundancy,
unexpected user-agent algorithm,
files .css imported from someone else's server,
scripts,
old junks, that we forgot to remove,
...
mess and redundancy,

Css works as cascade. In your .html <head> you have multiple .css files their order matters. First is overwritten by second, second by third. That's all
... doesn't matter how many times you fix a.css, because this vicious border is declared closer to element than a.css. If you fixed properly but ineffective - follow the cascade.

White border around page doesn't go away (html, css, js)

2 Answers2