横幅响应xs设备

Question

我在导航栏上方有750x100横幅。当我将窗口最小化到col-xs时，我遇到了两个问题 -

1）Navbar品牌跳过线下。 （红线）

2）横幅太小，我想将它对齐到中心或放大高度。 （蓝线）

    <div class="container-fluid banner text-center">
    <div class="row">
            <div class="col-md-12">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/750x100" alt="" style="margin: 0 auto;">
                </a>
            </div>  
    </div>
</div>

    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">Some long texthere</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">about</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">about</a></li>
          </ul>
        </div>
      </div>
    </nav>

我可以像我写的那样安排地方，还是应该尝试其他方式？