为什么我的标题没有考虑滚动条

Question

由于某种原因，我的标题不考虑滚动条并且正在向右侧添加px。但仅限于我的标题。

我没有CSS但是设置了文本。

我设置了媒体查询，因此我的头文件看起来像这样

/* Basic Header Styles
  ======================= */
header {

  /* Mobile Exlusive Styles
  ============================ */
  @media screen and (max-width: 767px) {

  }

  /* Ipad to Desktop Styles
  ============================ */
  @media screen and (min-width: 768px) {

  }

  /* Desktop to LG Styles
  ========================== */
  @media screen and (min-width: 992px) {

  }

  /* LG > Styles
  ================= */
  @media screen and (min-width: 1200px) {

  }

}

我的标题标记如下：

.header-logo
  %ul
    %li
      = image_tag 'https://s3-us-west-2.amazonaws.com/mikaimages/Logo.png', :alt => 'Tree Logo', :id => 'main-logo'

    %li
      %h1 Mika Kalathil
%nav
  %ul
    %li
      =link_to 'Home', root_path, :class => is_active?('home')

    %li
      =link_to 'About', about_path, :class => is_active?('about')

    %li
      =link_to 'Projects', projects_path, :class => is_active?('index')

    %li
      =link_to 'Contact' , contact_path, :class => "#{is_active?('contact')}"

这是一个展示我当前网站的小提琴，以及正在发生的事情。 http://jsfiddle.net/RVPKL/