Selektory CSS3 - nie działają tak jakbym chcciał

Mam problem z selektorami w css3.
Tutaj mam formularz prosty

 
<div class="container">
        <nav></nav>
        <form class="horizontal-form">
            <fieldset>
                    <label for="username">User:</label>
                    <input type="text" id="username" name="username">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email">
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password">
                    <label for="confirmPassword">Confirm Password:</label>
                    <input type="password" name="confirmPassword" id="confirmPassword">
                    <input type="button" class="centerButton" id="centerButton" value="Sign Up">

            </fieldset>
        </form>
        </div>

Teraz chcę to formatować CSS:

@media screen and (min-width: 1080px){
    .horizontal-form label{
        margin-top: 10px;
        display: inline-block;
        width: 300px;
        vertical-align: middle;
        text-align: right;
    }

    .horizontal-form input{
        margin-top: 10px;
        display: inline-block;
        vertical-align: middle;
        width: 500px;
    }

    .horizontal-form input[type='button']{
        margin-left: 305px;
        width: 500px;
    }

}
 

Jeżeli użyje .horizontal-form to jest wszystko OK
Jeśli spróbuje użyc klasy lub id centerButton CSS nie jest wykorzystywany...
Nie wiem co z tym zrobić,

Wklej dokładnie co robisz - co nie działa.
najlepiej tu:
https://jsfiddle.net/

U mnie stylowanie działa:
https://jsfiddle.net/ujn1yv7w/

zapewne po prostu wtedy inne style są ważniejsze niż te przypisane do klasy. użyj narzędzi deweloperskich.