How can you resolve the issue of unnecessary right scrolling by 5 pixels?

Is there a reason why the page is scrolling right to left unnecessarily?

Here's the current code on Codepen for reference - some adjustments had to be made to the body margin and padding to avoid a gap between the footer and the end of the page.

View 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>
htmlcss

Answer №1

To fix the 8px margin issue causing the scrollbar, remove the "margin: -8px;" from everywhere and instead add "margin-top: -8px;" to your .header class.

(The -8 margin is creating an extra 8px on your page, leading to the appearance of the scrollbar. Removing it and following the code below should resolve the issue)

<!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>

Answer №2

My exploration of HTML and CSS has led me to discover the following:

.end .testi {
    width: 800px; /* The width of 800 pixels is causing issues, with content overflowing and displaying a scrollbar. */
    position: relative;
    left: 350px;
    text-align: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

javascriptjqueryhtml

Retrieve data from a collection by utilizing ng-repeat

I need help implementing a select interface on my website. Users will be able to choose a site, and then the associated country where the site is available will be displayed. To do this, I have a list of sites with information like their names and the co ...

javascripthtmlangularjs

Can the background image of a div be cropped using CSS/JavaScript techniques?

I have a div with a background image of a world map that I need to clip at two precise points. Clipping from the left side is straightforward. In my CSS: .le-map { background-image: url('../img/le-map-of-le-world.mlg'); background-size: 100% ...

javascriptcssimage

Utilizing rvest for extracting data from an HTML table through web scraping

I'm a beginner in web scraping and I'm attempting to extract data from the table below: <table class="dp-firmantes table table-condensed table-striped"> <thead> ...

javascripthtmlrweb-scraping

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout https://i.sstatic.net/1E8jO.png What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Curre ...

csslaravel-8

Using NodeJS to fetch external page data and return Javascript variable information

I need to retrieve the entire DOM of a specific page by sending a request, essentially crawling the website. The HTML directly includes a variable with some data, instead of it being in a separate script file. With my NodeJS backend, I am utilizing request ...

javascripthtmlnode.js

Having trouble getting the Java applet to function properly on my HTML page

Currently, I am in the process of learning Java and came across an interesting concept that suggests I can also run my Java code in a browser using an applet. However, when I attempted to do so, an error message popped up prompting me to click for more det ...

javahtmlapplet

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

Steps for printing a web page with a custom stylesheet instead of the default print.css file

I have a print.css file that handles printing website pages, but I now want to create a basic-print.css file specifically for printing out basic information. How can I add a button to the page that triggers the print functionality using basic-print.css ins ...

javahtmlcssprinting

Behavior of page scrolling in an ASP.Net web forms application with Bootstrap integration

Encountering a problem with page scrolling behavior in an ASP.Net web forms application when using Bootstrap CSS. Here's what's happening: Started a new Web Forms project in Visual Studio 2022 Visual Studio set up the project with necessary fold ...

javascripthtmlcssasp.netbootstrap-5

Adjusting a model using an input is causing a ValueError

Attempting to enable the user to modify a decimal value named 'amount'. Once the user clicks on 'edit', a decimal field will be displayed. Upon finishing the value change and clicking "done"... An error is thrown: Exception Type: Valu ...

pythonhtmldjango

Is it necessary for background images to be loaded on mobile devices within media queries in CSS3?

Assuming the following CSS: div {background: #000} @media (min-width: 1000px) { div {background: url(myimage.jpg)} } Would a smartphone with a width of 320px download the background image? Thank you! ...

cssmobileloadingmedia-queries

Avoid displaying pop-up repeatedly (using current library)

I am currently customizing a Shopify theme that includes its own popup settings. I have created a new popup for my website that prompts visitors to choose their preferred language upon arrival. Everything seems to be working fine up to this point, but the ...

javascripthtmljqueryshopify

Is there a method similar to insertBefore that works with arrays and/or HTMLCollections?

Is there a vanilla JavaScript or jQuery function that works like Node.insertBefore(), but for arrays and/or HTMLCollections? An example of what I'm looking for: var list = document.getElementsByClassName("stuff"); var nodeToMove = list[0]; var other ...

javascriptjqueryhtmldom

Tips on creating reusable scoped styles for 3 specific pages in Vue.js without impacting other pages

Our project includes global classes for components that are utilized throughout the entire system. <style lang="scss" scoped> .specialPages { padding: 0 10px 30px 10px; } /deep/ .SelectorLabel { white-space: nowrap; al ...

cssvue.jsvuejs2vue-component

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

javascriptjqueryhtml

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

htmlangulartypescriptionic2

The parent element is concealed when the content inside the expanding span grows

I created an HTML and CSS design with the following styles: .sectionTitle { color: #fff; background-color: #e8eaed; padding: 0; height: auto; } .contentAlignment { margin-left: 10px; line-height: 23px; max-width: 100%; cursor: text; font ...

htmlcssbootstrap-4

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation