Search code examples
htmlcssremoving-whitespace

HTML\CSS Unused Whitespace

I'm working on a website and I have a lot of unused whitespace on the sides. I can't figure out which property to edit to get rid of it. If I could utilize that space I could move my elements around better. I posted a picture to illustarte how much white space I have on the side, and what I'm shooting for when I get rid of the space. If I need to post any code I can. enter image description here

wrapper encases the entire body 

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}

pair is the class the divs are held in

.pair {
    float: left;
    border:10px solid #002233;
    border-radius: 10%;
    overflow: auto;
    margin: 5% 0;
}
Solution

  • Your 'problem' is your wrapper:

    #wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}

    It sets the max-width to 940px and centers the content with the margin: 0 auto;

    Try to use the float: left;-idea with the following code:

    #wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}