CSS styles are not doing what they should

CSS styles are not doing what they should

My first venture into writing HTML is not going so well. I'm usually quite
adept at finding out how to do things but in this case, the solutions
given are just not working.
Here's my latest head scratcher:
<div style="margin-top: 9px; margin-bottom: 9px; float: right; width:
55.45%;">
<div id="home" class="button-style" style="width: 4px; float: left;">
<a href="_blank"></a>
</div>
<div id="options" class="button-style" style="width: 4px; float: right;">
<a href="_blank"></a>
</div>
<div id="settings" class="button-style" style="width: 4px;
margin-left: auto; margin-right: auto;">
<a href="_blank"></a>
</div>
</div>
Forgive the inline styles, they allow me to edit on the fly.
The above should center the third <div> between the two floaters, but I
just cannot get it to work. The outer container is stretched correctly,
the "home" and "options" divisions are also placed correctly. But,
"settings" is butted up to "home".
This is just one example of things not working. Others include centering
vertically (almost all methods) and rearranging vertical order according
to media queries. I tested code on chrome and IE10, so I'm pretty sure the
problem is in my code, but I can't find it.
What is the best debugging tool? I currently use chrome's built in element
viewer as it shows me which styles are applied. But, it's just not
powerful enough.
Is there a visual IDE which displays the result as you type? Switching
between 'Netbeans' and 'chrome' is a time waster. I should note here that
any IDE needs to work with my server since I'm also coding PHP.
What could be causing the problems I'm seeing? Is it a missing style or
something to do with how elements are sized?
Thanks in advance