Why are scroll bars on web page?

Question

html {
  background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  color: #ffffff;
}

button {
  color: #fff;
  border: none;
  padding: 10px 20px;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  -webkit-transition: background 2s;
  /* For Safari 3.0 to 6.0 */
  transition: background 2s;
  /* For modern browsers */
}

button:hover {
  background: #3cc16e;
}

div {
  min-height: 20px;
}

header {
  padding: 5px;
}

footer {
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  margin-top: -100px;
  padding-top: 2px;
  padding-left: 5px;
  position: relative;
  overflow: auto;
}

nav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

section {
  text-align: center;
  font-family: Arial sans-serif;
  min-height: 100px;
  margin-bottom: 50px;
}

.header_d {
  /*div  header links */
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  min-width: 20%;
  margin: 35px 0 0 80%;
  padding: 2px;
  height: auto;
  position: absolute;
  top: 0;
  box-shadow: 5px 5px 10px #ffffff;
}

.header_p {
  /*div  header links */
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
}

.joe {
  float: right;
  margin: 5px 5px 5px 0;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

#footer_p {
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  margin-top: 15%;
}

#Joe {
  width: auto;
  height: auto;
  padding: 0px;
  float: right;
  border: 5px solid black;
}

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>

This one doesn't have scroll bars, but I haven't been able to figure out why:

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>

Answer 1

fixed problem by adding following styling to html in styles0.css:

top: 20px; right: 20px;

scroll bars no longer appear! thanks to all contributors...

found answer through google search, then: https://css-tricks.com/

Answer 2

Another way of explaining this issue is that your header block is already at 100% width relative to your page. When you give your header_d class a left margin of 80% and then designate its position as absolute, everything contained in header_d has a a left margin of 80% relative to your page, and not the containing header. This, combined with the minimum width of 20% for header_d, causes horizontal overflow.

This issue can be fixed by making header_d's width and left-margin relative to the size of header (e.g. change position: absolute; to position: relative), but this will require re-positioning of header_d assuming you want it to remain in its current position.

Another fix would be to make header_d's combined min-width and left-margin < 100%, but making its position relative should make it more easily updated--even though it will require more work now.

Answer 3

Scroll bars will appear on divs or containers on a webpage if the content inside is too big for the container. For example, if a photo is a 400px width by 400px height, but the div/container it is in (its parent container) is only 200px by 200px, a user would need to be able to scroll to see the full photo. On your sites, if there is more content than a screen can fit with its current view, a scroll bar would appear. Maybe you have some large photos or something.

It's good to know that how the content inside its parent is displayed can be changed in CSS. You do this with the overflow property. This will allow you to decide if the content inside its parent can be scrolled, if you want any overflowing content to be cut off (hidden) or if you want it to flow over the sides of its parent. You can read more on it here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

If you would like to still be able to scroll content, but remove the actual scrollbar, there is a feature in development that you can read about here: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Answer 4

There is a margin problem in .header_d, this part margin: 35px 0 0 80%; . The size of the content of an element is bigger, then element itself. Marked the place in code.

html {
  background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  color: #ffffff;
}

button {
  color: #fff;
  border: none;
  padding: 10px 20px;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  -webkit-transition: background 2s;
  /* For Safari 3.0 to 6.0 */
  transition: background 2s;
  /* For modern browsers */
}

button:hover {
  background: #3cc16e;
}

div {
  min-height: 20px;
}

header {
  padding: 5px;
}

footer {
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  margin-top: -100px;
  padding-top: 2px;
  padding-left: 5px;
  position: relative;
  overflow: auto;
}

nav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

section {
  text-align: center;
  font-family: Arial sans-serif;
  min-height: 100px;
  margin-bottom: 50px;
}

.header_d {
  /*div  header links */
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  min-width: 20%;
  /*margin: 35px 0 0 80%;*/ /*i think, this is the key*/
  margin: 35px 0 0 0;
  padding: 2px;
  height: auto;
  position: absolute;
  top: 0;
  box-shadow: 5px 5px 10px #ffffff;
}

.header_p {
  /*div  header links */
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
}

.joe {
  float: right;
  margin: 5px 5px 5px 0;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

#footer_p {
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  margin-top: 15%;
}

#Joe {
  width: auto;
  height: auto;
  padding: 0px;
  float: right;
  border: 5px solid black;
}

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>

Answer 5

You have problems with margin: 35px 0 0 80%; at .header_d. Take a look at the 80% which means 80% from left to right which causes element to go overflow.

Instead of margin (remove it) try to set top/right like this:

top: 20px;
right: 20px;