Código não sobrescreve

Oi, tento configurar o css diferentemente do que vem determinado no Bootstrap, mas, diferente do que o instrutor mostra, minha classe não sobrescreve a classe do Bootstrap, sei disso porque no console o CSS que aparece controlando o trecho é aquele que coloquei do Bootstrap. Segue o código:

                <form action="">
                <div class="form-group">
                    <label for="contato-name">Nome:</label>
                    <input type="text" class="form-control" id="contato-name" placeholder="Seu nome">
                </div>

                <div class="form-group">
                    <label for="contato-email">Email</label>
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="email" class="form-control" id="contato-email" placeholder="seunome@email.com">
                    </div>
                </div>

                <div class="grupo-radio">
                    <div class="radio">
                        <label>
                            <input type="radio" name="pessoa" checked>
                            Pessoa Física
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="pessoa">
                            Pessoa Jurídica
                        </label>
                    </div>
                </div><!-- (a classe .contato-select não sobrescreve a .form-control)

            --><select class="contato-select form-control">
                   <option selected>Tipo de projeto</option>
                   <option>Casa</option>
                   <option>Apartamento</option>
                   <option>Chalé</option>
                </select>

            </form>

CSS:
.contato-select,
.grupo-radio {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}