Troubleshooting Scroll Bar Issues

Something on our page is causing a horizontal scroll bar in the web browser. This scroll bar appears at any window width and any screen resolution.

Our problem is one that's relatively easy to fix, but a lot of times, horizontal scroll bars are difficult to troubleshoot. Typically, a single width property, or any combination of width properties, are causing something to render in more space than the page allows. In our case, the footer of our page has a width property set to 100%:

footer {
    background-color: white;
    margin-bottom: 0;
    padding: 0 3%;
    border-top: 1px solid #462
    width: 100%;
    clear: both;
}

Exiting code block.

Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.

One way we can fix this is to change the display property of the footer. Currently, the footer doesn't have a display property explicitly defined, so it is defaulting to display: block;. We could also fix our scroll bar problem by replacing the width property with a display property with the value flex. Flex display allows an element to be displayed as a block element but also fill its parent container.

Step1. To fix the footer display, change the code as shown below:

footer {
    background-color: white;
    margin-bottom: 0;
    padding: 0 3%;
    border-top: 1px solid #462
    display: flex;
    clear: both;
}

Exiting code block.

NOTE: We are replacing width: 100%; with display: flex;.

This should fix our scroll bar problem. Let's test it now.

Step2. Save style.css and refresh index.html.

The horizontal scroll bar has disappeared:

As you can see, this has also changed the way the children of footer (the <section> elements) display, allowing them to more appropriately fill the available space. The alignment of those items still isn't quite what we would like, but we will see how to fix that in the following challenge exercise.

NOTE: To learn more about the flex properties and values and how to effectively use them, see our workshop, HTML5 & CSS: Creating Style for the Web.