Need help alligning image in header with bootstrap elements

[geekmonster 0]

Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here?

 

 

First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be?

<nav class="navbar navbar-progress">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Existential Graph Editor</a>
        </div>
        <ul class="nav navbar-nav">
            <!--li class="active"><a href="#">Home</a></li-->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">File
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
        <!--ul class="nav navbar-nav navbar-right">
            <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li-->
            <!--img src="../images/uahLogo.png" class="img-rounded" -->
        <!--/ul-->
    </div>
</nav>
<form>
        <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label-->
    <div class="input-group">
        <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2">
        <span  class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span>
        <span  class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span>
        <span  class="input-group-addon" id="save">Save</span>
        <span  class="uahImg"><img src="../images/uahLogo.png" height="100"> </span>
    </div>
</form>

[davej 251]

Wouldn't it make more sense to put the image at the bottom of the div containing the unordered list?

   </ul>
            <!--ul class="nav navbar-nav navbar-right">
                <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li-->
                <!--img src="../images/uahLogo.png" class="img-rounded" -->
            <!--/ul-->
      <span  class="uahImg pull-right"><img src="../images/uahLogo.png" height="100" alt="alt"></span>
   </div>