Search code examples
htmlcssfooter

Footer is scrollable horizontally but it shouldn't

I created my site and the footer of it is scrollable horizontally but it shouldn't. It's wider than the rest of website.

HTML of footer:

<div class="footer">Atomdev.tk &copy; 2017</div>

CSS of footer:

.footer {
    width:100%;
    position: absolute;
    overflow: hidden;
    left: 0
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222222;
    padding: 30px;
}

Here is my website with this footer: atomdev.tk

Solution

  • You can either...

    • add box-sizing: border-box; to .footer (by default the box model will add any paddings and borders to the calculated width of the element - box-sizing: border-box keeps the width of padding/border within the specified width)

    or

    • remove width(s) and add right: 0;