The button in the Materialize form is not centered, what's the problem?

Question

css

There is a form

<div class="row col m4 l4 lead-form hide-on-small-and-down">
                <div class="col m12 l12 idea-wrapper">
                    <h3 class=" have-idea">Есть идея?</h3>
                </div>
                <form class="col m12 l12" action="send.php">
                    <div class="row">
                        <div class="input-field form__name">
                            <input placeholder="Как вас зовут?" id="name" type="text" class="validate">
                        </div>
                        <div class="input-field form__phone">
                            <input placeholder="Ваш телефон" id="phone" type="text" class="validate">
                        </div>
                    </div>
                </form>
               <div class="col l12 m12 center-block submit-button">
                   <button class="btn waves-effect waves-light center form__submit-button " type="submit" name="action">отправить
                   </button>
               </div>
            </div>

Styles for her:

.lead-form{
    background-color: white;
    border-radius: 30px;
    box-shadow: 0px 0px 40px #000000;
}
.have-idea{
    font-size: 4em;
    text-align: center;
    padding: 20px 0;
}
input{
    border-bottom: 3px solid #FF0000;
}
.submit-button{
    margin: 0 auto;
}
.form__submit-button{
    border-radius: 120px;
    background: #4F4F4F;
    color: white;
}
.form__submit-button:hover{
    background: #4F4F4F;
    color: white;
}

.form__submit-button:active{
    background: #4F4F4F;
    color: white;
    text-decoration: none;
}

For some reason, the button block is not centered, how can I center it?

Answer 1

.submit-button {
   text-align: center;
}