Html Shopify上的固定元素定位

我的问题是：

我试了又试，但没能使我的字幕（橙色和灰色的旗帜，这是一个固定的元素）居中或响应。如您所见，当您减小屏幕尺寸时，它不再覆盖旋转木马的顶部，而是向右移动。当它是正常的屏幕大小时，它甚至不居中

所以我的问题是。如何制作此固定元素： -居中 -响应性强（因此它始终覆盖旋转木马的顶部）

我的代码如下

<!-- Begin right navigation -->
  {% if settings.navigation_alignment == "right" %}
  <div class="row" id="header">
    <div class="span12 border-bottom">
      <div class="span12" style="margin-top:50px;">
            <div class="logo">
                <img src="http://img69.imageshack.us/img69/4620/gcl6.png"/>
            </div>
      </div> 
    </div>
  </div>


  {% endif %}
  <!-- End right navigation -->

{%if settings.navigation_alignment==“right”%}
{%endif%}

如果要更改横幅的位置并调整其大小以覆盖旋转木马，请使用媒体查询

@media screen and (max-width: 600px) {



}

并在两者之间根据需要修改图像，对媒体查询有更好的了解