Center TextBoxFor with icon in column

I am trying to create a centralized login form, but with the code below the input text is aligned to the left and the icon to the right:

<div class="form-group">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="input-group">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
            </div>
        </div>
    </div>
</div>

The input size is set to 280px (bootstrap default in the Site.css file) and I would not like to change it. See in the image below the result, I would like to know how to join the input and the icon, and that the two were in the center of the column.

I got the expected result as follows:

<div class="form-group">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div align="center">
                            <div class="input-group" style="max-width: 280px">
                                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            </div>
                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>

JsFiddle

You should do it like this:

<div class="form-group">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="input-group">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

ValidationMessageFor render to span element and causes space between input and icon.

Result:

Edit

If you do not want to change css, you can fix it by JQuery like this:

$('.input-group').find('input').removeAttr('style');

Please see jsfiddle.

Try:

<div class="form-group">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div style="width: 280px">
          <div class="input-group">
            @Html.TextBoxFor(m => m.EMAIL, new { @class = "form-control", placeholder = "E-mail" })
            @Html.ValidationMessageFor(m => m.EMAIL, "", new { @class = "text-danger" })
            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
          </div>
        </div>
       </div>
     </div>
  </div>

Put the width style in a div and not in the input <div style=”width: 280px”> …input field… </div>