How can I increase the width of the Html.TextBoxFor control beyond its default in an MVC 5 form

I am trying to increase the width of an Html.TextBoxFor control in an ASP.NET MVC 5 View page using razor syntax. I am using Visual Studio 2017. I created a css style (.textboxfor-width) to increase the control's width as shown below but it is not working.

/* *** Remove this comment line if trying to use in Visual Studio */

@using rgmsite.Models
@model LoginTestViewModel
@{
    ViewBag.Title = "Log in";
}

<style type="text/css">
    .textboxfor-width {
        width: 700px;
    }
</style>

<h2>SimpleTest</h2>
        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account",
              new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
              new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <div class="form-group">
                    @Html.TextBoxFor(m => m.Email,
                   new {  @class = "form-control textboxfor-width",
                       placeholder = "Enter email address to be used as your user name"
                   })
                </div>
            }
        </section>

 *** Remove this comment line if trying to use in Visual Studio   */

Here is the view model (LoginTestViewModel) I am using for the form:

/*  *** Remove this comment line if trying to use in Visual Studio   */

  public class LoginTestViewModel
  {
    public string Name { get; set; }
    public string Email { get; set; }
  }


 *** Remove this comment line if trying to use in Visual Studio    */

Using a smaller width value such as 40px in the css works. But there seems to be some limit imposed on the control preventing it from being wider (such as 700px) than the default. Flushing the Chrome cache and doing a hard reload is not fixing the problem for me. What needs to be done to make the TextBoxFor control wider than the default?

Thanks in advance.