I had asked this question in another thread, but thought it better to post it again here, where hopefully more people may see it . I am trying to implement a twitter typeahead feature in my search box. The problem is, when the user starts to type a search term, the typeahead drop-down 'drops down', but the left edge is aligned with the left edge of the Search Box. This makes the typeahead drop-down extend way off the right edge of the screen. (the right edge of the black NavBar is the right edge of the page). Initially, the width (ie: colored portion) of the typeahead drop-down was the same width as the Search Box (with the text overflowing into space), but I was able to widen it with CSS .typeahead.dropdown-menu { width: 500px; } I think I've identified *what* I need to change ... I just don't know *where* to change it. I just need to apply a CSS definition to shift the dropdown-menu    left: -290px; While inspecting the elements, I see that the generated HTML code is: <ul class="typeahead dropdown-menu" style="top: 34px; left: 0px; display: none;"> (See #1 below) When I search for where this line of code is generated, I find that; "<ul class="typeahead dropdown-menu" is only listed once in all of the code, and that's in bootstrap3-typeahead.min.js But, the style= part of the code is not in there (not that I know anything about javascript ...) So, I try to add a CSS definition to user.css (see #2 above) However, it is overridden by the inline element (see #3 above) If I use the inspect element tool to modify #3, the dropdown-menu moves to where I want it ... So, my question is .... how and/or where do I override the inline style for the element, so I can change it? TIA Malcolm