ASP.NET表单中的md按钮尺寸不正确

Question

I have a ASP.NET form in which I'd like to add a md-button but when I put my md-button inside the form it gets resized and it doesn't fit the row as I want it.

I can't find any documentation on this behaviour, I tried to set the layout on the button itself, put it in a md-input-container, etc...

I want this button in the form so I don't have to rewrite the submit form function myself.

Here's my form in HTML :

<div layout-padding layout="column">
    @using (Html.BeginForm("Login", "Home", FormMethod.Post))
    {
        <md-input-container class="mt-35" layout="row">
            <label>Ton email :</label>
            @Html.TextBoxFor(x => x.Username)
        </md-input-container>
        <md-input-container layout="row">
            <label>Ton mot de passe :</label>
            @Html.PasswordFor(x => x.Password)
        </md-input-container>
        <md-input-container layout="row">
            <md-checkbox aria-label="Rester connecté">
                Rester connecté
            </md-checkbox>
        </md-input-container>
        <md-button class="md-raised md-primary">Me connecter</md-button>
        <!-- This button doesn't fit -->
    }
    <md-button class="md-raised md-primary">Connect with Facebook</md-button>
    <!-- This one does -->
</div>

I didn't change any CSS for these, i'm working with Angular Material 1.1.0

Here's two screenshots of what I'd like to achieve and what I have now :

That's what I have now, with the code I wrote above.

That's what I want to achieve.

EDIT : Here's my additional CSS :

.parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.mt-35 {
    margin-top: 35px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.md-content.md-default-theme, md-content {
    background-color: white !important;
    border-radius: 10px !important;
}
.md-datepicker-input-container {
    width: 100% !important;
}
.md-datepicker-input {
    max-width: 100% !important;
}

Answer 1

Found it !

The form was messing with the layouts, I have it working by adding the layout attribute in the BeginForm method :

@using (Html.BeginForm("Login", "Home", FormMethod.Post, new { @layout = "column" }))
            {
                <md-input-container class="mt-35" layout="row">
                    <label>Ton email :</label>
                    @Html.TextBoxFor(x => x.Username)
                </md-input-container>
                <md-input-container layout="row">
                    <label>Ton mot de passe :</label>
                    @Html.PasswordFor(x => x.Password)
                </md-input-container>
                <md-input-container layout="row">
                    <md-checkbox aria-label="Rester connecté">
                        Rester connecté
                    </md-checkbox>
                </md-input-container>
                <md-button class="md-raised md-primary md-button-no-margin" layout-padding type="submit">Me connecter</md-button>
            }

And custom CSS to get rid of the margin in md-button class :

.md-button-no-margin {
    margin: 0 !important;
}