making the width of drop down bigger - css

Question

I have the following code on my page for dropdown list box. No matter how much I try, I cannot make the width of the dropdown box bigger. Below is my code:
<div class="form-group row">
<div class="col-sm-1"> </div>
<label for="inputTitles" class="col-sm-3 col-form-label"><asp:Label ID="lblDocType" runat="server"></asp:Label></label>
<div class="col-sm-8">
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
I tried to put this style sheet in the asp:DropDownList class:
<style>
.ddlwidth {
width: 1000px !important;
}
</style>
<asp:DropDownList class="form-control ddlwidth" ID="ddlDocType" runat="server" OnSelectedIndexChanged="DocType_Changed" AutoPostBack="true" Width="700" >
That didn't work either. If I remove the form-control and then increase the width of the dropdownList then the width becomes bigger. The reason, I don't want to remove the form-control class because I want to keep the look and feel of form-control class.
How can I increase the width of the dropdownlist box without removing the form-control class?
Below is what it looks like on my web page:

Answer 1

Try this in your style sheet:
.form-control {
width: 394px;
And then:
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>