Can't force blank space at end of row

I am trying to force some blank space at the end of a row in bootstrap. I've tried just about everything I can think of and NOTHING works. Here is the code:

<div class="row" style="background-color: black;">
                        <div class="col-xs-1 col-sm-1 col-md-1">&nbsp;</div>
                        <div class="col-xs-9 col-sm-9 col-md-9 text-right" style="width:100%; font-size:22px; color: white;  height: 40px; line-height: 60px;"><b><a href="login.php">Log In</a><span style="padding-left:40px;"><a href="overview.php">Product Overview</a></span><span style="padding-left:40px;"><a href="sign_up.php">Sign Up</a></span><span style="padding-left:40px;">Support: Text: <a href=”tel:+1-713-518-9660″>713-518-9660</a></span></b></div>
                        <div class="col-xs-2 col-sm-2 col-md-2"><img src="images/black_spcer.jpg"></div>
                  </div>

The image black_spcer.jpg is a 40 pixel wide, 10 pixel high image. It is like it is ignoring everything I'm trying to do to move the items in the div class col 9 left by 40px.

You can see the result here: (please use a desktop or good size screen laptop, it aligns differently for tablets & phones).

https://www.backflowtestreport.com/new_look/

It's gotta be obvious, but I just can't see it.

Thanks