adjusting css width for customized drop down box - css

Question

Here is drop down box I got to work for me.
But it goes outof boundry on left end. Actually menu items should fit exactly below the text box.
Check Fiddle
I tried changing width of all element but could not set it. Can some one tell me which class exactly controls width of menu item which appear when dropdown box is popped?
css:
.container {
width:90%;
margin:10% auto;
}
.dropdown-menu{
width:85%;
margin:0 auto;
}
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 360px; !important;
}
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.tt-dropdown-menu {
min-width: 260px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}

Answer 1

On your class .dropdown-menu add this:
.dropdown-menu{
width:360px;
left:auto;
margin:0 auto;
}
The Fiddle demo
It's because 360px is the size of your input .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint.
And the left:auto to keep the original distance no matter the absolute position.