При изменении разрешения, телефон и поиск в шапке смещаются.

Здравствуйте нужна помощь . Есть сайт , на мониторе все хорошо когда меняется разрешение будь то смартфон или планшет ,телефон и поиск в шапке сайта начинают плавать , или половина телефона есть а остального нет . Подскажите.
Сайт www.Karllson.ru

 

Ну первое, что бросилось в глаза, так это то, что номер телефона находится не в шапке, а под ней. В шапку контакт притянут вручную. Только поэтому он уже не будет нормально "складываться" внутри шапки, т.к. физически находится за её пределами.

 

Добрый день Спасибо ,подскажите как тогда его правильно прописать ,что б он в шапке был посредине как сейчас ? И я так понимаю такая же ситуация с поиском ?

--- Добавлено, 1 фев 2016 ---

iga,

Добрый день Спасибо ,подскажите как тогда его правильно прописать ,что б он в шапке был посредине как сейчас ? И я так понимаю такая же ситуация с поиском ?

--- Добавлено, 1 фев 2016 ---

Может кто нибудь адекватно помочь?

 

1) настройки законментить или удалить для тебефона http://joxi.ru/n2YnjbPfj5vvOA

/* margin-top: -35px; */
/* z-index: 100; */
/* position: relative; */
/* top: -55px; */
/* right: 471px; */
/* margin-right: 0px; */
/* width: 950px; */
/* left: -298px; */
2) отредактировать структуру: http://joxi.ru/Rmze31JSW5PEVr -это как есть. Суть в том что то что находиться в зеленом квадрате нуно поместтить между <header></header>
тоесть в результате будет так:http://joxi.ru/4Akvj5KIMKwz02
3) пустые и ненужные блоки удалить(например h1)
4)у Вас в шапке все елементы абсолютно отпозиционированы - при таком количестве елементов в шапке не советую...

после манипуляций в пп. 1-2 шапка поедет. Ее надо будет выровнять.

Код:

#header .welcome-links {
    float: right;
    /* margin-right: 10px; */
    margin-top: 24px;
}
#header #cart {
    /* min-width: 180px; */
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    /* top: 101px; */
    /* bottom: 61px; */
    /* z-index: 95; */
    margin-left: 225;
}

#header .header-left {  float: left;
}
#header .header-right {
    float: right;
    /* clear: both; */
    /* position: relative; */
    width: 704px;
}
#header #search {
    /* left: -266px; */
    /* right: 341px; */
    /* top: 32px; */
    float: left;
    /* margin-top: 62px; */
    /* position: relative; */
    width: 399px;
    z-index: 15;
    margin-top: 20px;
}

#header #welcome {
    /* z-index: 5; */
    /* text-align: right; */
    /* float: right; */
    color: #309BE3;
    /* margin-top: 105px; */
    /* margin-right: -290px; */
}
#header .welcome-links {
    float: right;
    /* margin-right: 10px; */
    margin-top: 24px;
}
для телефона:  font-size: 25px; font-family:Arial; text-align: right;color:#8B4513;padding-top: 15px;text-align: center;

А потом віровнять моб версию