CODEWITHSUNDEEP
htmlcss
Abdalrahman Gamal
Abdalrahman Gamal

Reputation: 23

5 pixels of scrolling right for no reason, how to fix?

The problem is that the page have a scroll right-left for no reason?

here is the codepen for current code body margin and padding because if i removed that it make a gap between the footer and the end of the page;

codepen 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temp Test</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <div class="header">
    <div class="header-content">
      <h2>Notify</h2>
      <p>A great new free psd theme to showcase your new application.</p>
      <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button>
      <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button>
      <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button>
    </div>
  </div>
  <div class="features">
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
  </div>
  <div class="get-notified">
    <div class="text">
      <h3>Get Notified Of Any Updates!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
        sollicitudin ante lobortis at.</p>
      <form>
        <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center;
    border: none;
    border-radius: 8px;
    width: 260px;
    height: 31px;
    float:left;" /></span>
      </form>
      <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" />
    </div>
    <div class="video-notified">
      <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style="
    float: right;
    width: 400px;
    height: 230px;
    padding-top: 50px;
    padding-right: 95px;
"></iframe>
    </div>

  </div>
  <div class="end">
    <div class="testi">
      <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.”</p>
      <h4>Jane Hunt</h4>
    </div>
    <div class="get-social">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60">
      <h3>Say Hi & Get in Touch</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p>

      <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a>
      <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a>
      <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a>
      <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a>

    </div>
  </div>

</body>
<footer>

</footer>

</html>

Upvotes: 0

Views: 51

Answers (2)

sms247
sms247

Reputation: 4504

use below code just remove margin: -8px; from every where and just add margin-top: -8px; in your .header class

(this -8 margin create extra 8px in your page so that's why scrollbar is appearing just removed it and follow below code its will work fine for you)

<!DOCTYPE html><html class=''>
    <head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Iwillsolo/pen/EyJaro" />


<style class="cp-pen-styles">@charset "utf-8";

/* CSS Document */

body {
  margin:0;
  padding:0;
}

.header {
  background-image: url('http://i.imgur.com/5BABBRC.png');
  height: 500px;
  margin-top: -8px;
  border-top: 7px solid #2ecc71;
  overflow: visible;
}

div button {
  background-color: rgba(31, 12, 9, 0.32);
  width: 56px;
  height: 53px;
  border: none;
  border-radius: 100px;
}

div button:hover {
  background-color: #797966;
  cursor: pointer;
}

.header .header-content {
  margin: auto;
  text-align: center;
  padding-top: 257px;
  padding-right: 643px;
}

.header .header-content h2 {
  padding-right: 300px;
  color: #2ecc71;
}

.features {
  width: 100%;
  height: 295px;

  margin-top: 8px;
}

.features .features-content_1 {
  margin: auto;
  padding-top: 60px;
  margin-left: 80px;
  text-align: center;
  width: 400px;
  float: left;
}

.features .features-content_1 img {
  width: 60px;
}

.get-notified {
  height: 355px;

  background-color: #e3e3e3
}

.get-notified .text {
  width: 401px;
  text-align: justify;
  margin-left: 100px;
  padding-top: 25px;
  float: left;
}

.get-notified .video-notified {
  width: 642;
  height: 377px;
  float: right;
}

.end {
  height: 400px;

}

.end .testi {
  width: 800px;
  position: relative;
  left: 350px;
  text-align: center;
}

.get-social {
  text-align: center;
}

.get-social a {
  padding-left: 10px;
}

footer {
  background-color: #e3e3e3;
  height:150px;
}</style></head><body>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temp Test</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <div class="header">
    <div class="header-content">
      <h2>Notify</h2>
      <p>A great new free psd theme to showcase your new application.</p>
      <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button>
      <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button>
      <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button>
    </div>
  </div>
  <div class="features">
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
  </div>
  <div class="get-notified">
    <div class="text">
      <h3>Get Notified Of Any Updates!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
        sollicitudin ante lobortis at.</p>
      <form>
        <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center;
    border: none;
    border-radius: 8px;
    width: 260px;
    height: 31px;
    float:left;" /></span>
      </form>
      <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" />
    </div>
    <div class="video-notified">
      <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style="
    float: right;
    width: 400px;
    height: 230px;
    padding-top: 50px;
    padding-right: 95px;
"></iframe>
    </div>

  </div>
  <div class="end">
    <div class="testi">
      <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.”</p>
      <h4>Jane Hunt</h4>
    </div>
    <div class="get-social">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60">
      <h3>Say Hi & Get in Touch</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p>

      <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a>
      <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a>
      <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a>
      <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a>

    </div>
  </div>

</body>
<footer>

</footer>

</html>

</body></html>

Upvotes: 1

Prince Sodhi
Prince Sodhi

Reputation: 2955

as I have found in you HTML and CSS. 

.end .testi {
    width: 800px; /* THIS 800 PX CREATES PROBLM. CONTENT GOES OUT AND SHOWS SCROLLBAR.*/
    position: relative;
    left: 350px;
    text-align: center;
}

Upvotes: 0

Related Questions