Html 修复网站标题，提高响应速度和浏览器兼容性

我试着在我为我的网站创建的标题上编辑我的代码，但我无法理解我失败的地方（css或html？）我不是在找菜单/导航

我希望这个标题是跨浏览器+响应（当我切换到移动视口时，它会变得非常奇怪，我的徽标也会变得非常小）。我正在使用引导框架

我不明白怎么解决这个问题

页面如下：

我的朋友：

HTML

<div class="header">

    <ul class="rslides">
        <li><img src="http://styleeuclides.site50.net/www/img/image_1.jpg" alt="" width="100%" title="slider" height="376px"/></li>
        <!-- other images aren't reveleant if this first image stays on top of the text -->
    </ul>

        <div class="top container">

            <a href="#" name="logo"><img src="http://styleeuclides.site50.net/www/img/logo.png" width="570" height="200" value="Cyber Meeting Brazil" class="img-responsive"/></a>      
            <div id="tres">
            <br/>
            <div id="countbox1" style="width: 100px; height=100px; display: inline; font-size: 22px; font-weight: bolder; letter-spacing: -0.75px; text-align: right; color: #fff; z-index: 5; position: relative; text-shadow: 1px 1px rgba(0,0,0, 0.25);" class="hidden-xs">This is a jQuery timer</div>

            <h3 class="hidden-sm">21 e 22 de Agosto</h3>
            <h4 class="hidden-xs">Hotel Pestana, São Paulo</h4></div>
        </div>

---

有人能帮我使用css吗？

看来你在使用引导，那么为什么不直接使用他们的响应式

导航栏呢

例如：

 <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default</a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>


切换导航










导航标题











示例来源：

有关引导导航栏的更多信息：
我不是在寻找导航栏或菜单，我只是想将我的徽标和文本正确地放置在图像上方（从我的滑块），以便与响应性/较小的viewportI配合使用。我没有发现标题上有任何问题，除非如果视口狭窄，标题背景图像会缩小。这就是问题所在吗？有点，因为我必须隐藏id#countbox1，因为它显示不正确，文本“21 e 22 de Agosto”也是如此，它从不停留在中间，即使使用显示块+文本对齐中心…您确定文本对齐：中心没有被覆盖吗？尝试添加！检查后的重要事项（“文本对齐：居中！重要；”）。或添加边距：0自动；
 <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default</a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>