Cannot affect css worth a darn

[kiettel]

I'm new to Foundation and jQuery SelectBox. That said, I have wasted all night trying to accomplish a simple task and with virtually no results at all. I have this HTML:\[code\]<!-- Top Nav --><div class="nav row"> <div class="small-3 columns"> <select id="team" name="team"> <option value="http://stackoverflow.com/questions/15825061/volvo">Volvo</option> <option value="http://stackoverflow.com/questions/15825061/saab">Saab</option> <option value="http://stackoverflow.com/questions/15825061/mercedes">Mercedes</option> <option value="http://stackoverflow.com/questions/15825061/audi">Audi</option> </select> </div> <div class="gear small-1 columns"> <a href="http://stackoverflow.com/questions/15825061/#"><img id="teamSettingsGear" src="http://stackoverflow.com/images/settings.png" alt="Team Settings" /></a> </div> <div class="small-3 columns"> <select id="site" name="site"> <option value="http://stackoverflow.com/questions/15825061/red">Red</option> <option value="http://stackoverflow.com/questions/15825061/blue">Blue</option> <option value="http://stackoverflow.com/questions/15825061/green">Green</option> <option value="http://stackoverflow.com/questions/15825061/yellow">Yellow</option> </select> </div> <div class="gear small-1 columns"> <a href="http://stackoverflow.com/questions/15825061/#"><img id="siteSettingsGear" src="http://stackoverflow.com/images/settings.png" alt="Site Settings" /></a> </div> <div class="small-3 columns"> <select id="info" name="info"> <option value="http://stackoverflow.com/questions/15825061/volvo">Volvo</option> <option value="http://stackoverflow.com/questions/15825061/saab">Saab</option> <option value="http://stackoverflow.com/questions/15825061/mercedes">Mercedes</option> <option value="http://stackoverflow.com/questions/15825061/audi">Audi</option> </select> </div> <div class="gear small-1 columns"> <a href="http://stackoverflow.com/questions/15825061/#"><img id="informationGear" src="http://stackoverflow.com/images/settings.png" alt="Information" /></a> </div></div>\[/code\]It's using both Foundation 4 and a jQuery plugin called SelectBox by Ivanov. Here is my attendant css:\[code\].header, .help, .content, .footer {padding-top: 10px;} .content {height: 500px;}.inventory, .multipurpose, .cart {text-align: center;}.nav {position: relative;top: -15px;}.gear {padding-left: 0px !important;margin-left: 0px !important;}\[/code\]All I want to do is have the gear float to the right of the select box, with maybe 10px in between. If I put the selectbox and the gear image in the same div, the gear image gets put on the next 'line' down. If I mess with position: relative; left: -whatever, then the gear does move closer to the select box, but because it's a responsive css toolkit, all I have to do is widen the browser to space them out again. Conversely, if I shrink the browser window, the gear floats over the select box. Help please,Lynn