How to change option width - html

Question

Hi guys i have a simple drop down box which i have styled my self but i have no idea how to change the option width. So it looks like this :
As you can tell the drop down is way smaller then the actual box so i was wondering how i can edit this size and get rid of the blue around the box and change its colour. I'm using boostrap 3
HTML:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
<span class="fa fa-sort-desc"></span>
</div>
CSS:
.styled-select {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
line-height: 20px;
color: #555555;
padding-left: 22px;
font-size: 13px;
font-family: Montserrat-Regular;
}
.styled-select option {
width: 74%;
}
.styled-select, .styled-select select {
width: 74%;
display: inline-block;
}
select:focus {
outline: none;
}
.styled-select select {
height: 40px;
padding: 5px 0 5px 5px;
background: transparent;
border: none;
-webkit-appearance: none;
}
#-moz-document url-prefix() {
.styled-select select {
width: 110%;
}
}
.fa-sort-desc {
position: absolute;
top: 12px;
right: 12px;
font-size: 24px;
}
select::-ms-expand {
display: none;
}
_:-o-prefocus,
.selector {
.styled-select {
background: none;
}
}

Answer 1

Instead of styling a div containing your select object, you should style the select object itself, for instance:
.styled-select {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
line-height: 20px;
color: #555;
padding-left: 22px;
font-size: 13px;
font-family: Montserrat-Regular;
}
.styled-select option {
width: 74%;
}
.styled-select, .styled-select select {
width: 74%;
display: inline-block;
}
select:focus {
outline: none;
}
.styled-select select {
height: 40px;
padding: 5px 0 5px 5px;
background: transparent;
border: none;
-webkit-appearance: none;
}
#-moz-document url-prefix() {
.styled-select select {
width: 110%;
}
}
.fa-sort-desc {
position: absolute;
top: 12px;
right: 12px;
font-size: 24px;
}
select::-ms-expand {
display: none;
}
_:-o-prefocus .styled-select, .selector .styled-select {
background: none;
}
<select class="styled-select">
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>