Почему часть блока обрезается\слетает?

Question

[lol_vova]

Есть блок хедера:

.top_header-wrap
	<div class="top_header-wrap">
      <div class="wrapper">
        <div class="top_block"><a class="logo" href="javascript:void(0);"><i></i>Lineage</a>
          <div class="top_btn">
            <a href="javascript:void(0);">Регистрация</a>
            <a href="javascript:void(0);">Войти</a></div>
        </div>
      </div>
    </div>

И его CSS:

.wrapper
  width 100%
  max-width 1300px
  min-width 730px
  margin 0 auto

.top_header-wrap
    background rgba(255,255,255,0.1);

.top_block
  height 60px
  
.logo
    height 100%
    display inline-block
    float left
    padding 15px 0
    font 30px 'Lineage2Font'
    color #fff
    i
        background url("../img/general/l.png") top left no-repeat
        height 30px
        width 30px
        display inline-block
        margin-right 10px


.top_btn
    float right
    display inline-block
    a
        font 12px Tahoma
        display inline-block
        padding 23px 10px
        text-decoration underline
    a:hover
        background rgba(0,0,0,0.1);

При нормальном просмотре это выглядит так:

Но при ресайзе, как только появляется скролл, то он слетает:

Как можно исправить?

Comments

[alex]

может потому что min-width 730px?

[lol_vova]

Alex: а если нужно, не убирая этого?
Если убрать, то да, работает

[alex]

lol_vova:

не убирая этого

каким образом? можно для боди поставить body { min-width: 730px; }

[lol_vova]

Alex: благодарю :)