Question: I'm trying to create an HTML page with a footer sticking to the bottom, independently from the size of the browser window. I created the following HTML file:

```html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Home </title>
        <link rel="stylesheet" href="./assets/css/styles.css">
    </head>
    <body>
        <h1> Home </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <footer id="footer">
            Foo Bar Baz
        </footer>
    </body>
</html>

```

And my stylesheet is:

```css
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    border: 1px solid;
}

```

I used the properties `position` and `bottom` following several guides.

I get the footer at the expected vertical position, but it is shifted horizontally to the right, whatever the window width is. For example: [full screen](https://i.stack.imgur.com/sFPqK.png), [medium](https://i.stack.imgur.com/OpKkf.png), [small](https://i.stack.imgur.com/oBWvk.png).

Where is the error? And how can I fix it?

Answer: 
If you use the position property outside of normal (such as absolute or fixed), you must give the property you gave on the vertical axis also on the horizontal. The Width value may not work because you are no longer in a normal flow.
Therefore, using it like this will give the correct result.

```
#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    border: 1px solid;
    left: 0px;
}

```
to answer your question, please look at this question.
[How to get rid of white space on left and right of div?](https://stackoverflow.com/questions/34302798/how-to-get-rid-of-white-space-on-left-and-right-of-div)

You have to reset your CSS. You can do this by adding the following to your Code.

```
html, 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

```