How to change width of an input field using bootstrap

Question

I tried several things to increase the field for email displayed. As you can see, it's chopped off and it would look better if the field was longer.

The code behind it looks like this:

<div class="row">
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
    </div>
  </div>    
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>
  </div>    
</div>

I've tried changing col-md-4 of the div to col-md-5 or 6 for the div, I've tried changing col-xs-5 to a bigger number as well.

I don't think I need to change col-md-4 to a bigger number for the label.

Any ideas why no changes are showing to make the email field wider? There's plenty of room on the page.

I looked at bootstrap examples and it looks like what I tried should have worked.

How do I get the email address field to be wider?

Update Per suggest answer of @JustLearning, I tried this:

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 1

I wound up adding this to site.css:

#step1Edit #EmailAddress{
    width:23em;
}

Then in my RegistrationStep1.cshtml, I added this in the outer div:

<div class="form-horizontal" id="step1Edit">

And that worked with the email identifier, with no changes:

<div class="col-xs-6 col-sm-6 col-lg-6">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-6 col-sm-6 col-md-auto col-lg-6">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
</div>