HTML elements not returning to original state after media query

Question

(I'm farely sure the issue has been fixed now. Thanks to the people that helped me. The issue was that I had put elements as direct child elements of a element.)

This is my first time making a StackOverflow ask so please do bear with me.

I'm currently working on a website and have run into a problem while adding media query's. On the screen are five buttons like this.

When changing making the width of the browser window smaller, the buttons adapt to follow the media query rules like so. Everything is going as expected so far.

The issue then occurs when increasing the browser window width. See here. In hopes of a result, I'll inform you of the code I'm using.

The media query code is

@media only screen and (max-width: 1100px) {
    #buttons {
        width: 100%;
    }

    #buttons li {
        margin-bottom: 10px;
        float: none;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

and the default code is

#buttons {
    position: relative;
    float: right;
    left: -50%;
}

#buttons li {
    float: left;
    padding: 10px;
    width: 175px;
    font-family: 'Republikaps';
    font-size: 24px;
    text-align: center;
    margin: 5px;
    box-shadow: 0 0 12px #000;
    border: 1px solid black;
    border-radius: 25px;
    background-image: url('assets/images/blog_bg.png');
    margin-bottom: 150px;
}

It'd be very much appreciated if somebody could help me solve this issue.

(PS: Unless I change it, here's a link to the website)