Я понимаю что накуралесила в хедере со своим обсолютным позиционированием, но это пока все что я научилась делать сама руками, без помощи посторонней, думаю в дальнейшем исправлю. Но пока зайдя через смартфон в хедере каша получается, подскажите как можно все это собрать?
Ваш header адаптивный? такое может быть если хедер не помешается в экран, поэтому сделайте через медиазапрос отдельно вёрстку для мобильного варианта.
С абсолютным позиционированием вряд ли что-то сделать можно, оно поэтому и абсолютное, что отступы и позиции определяются в не зависимости от размеров экрана. Поскольку хотите и дальше верстку изучать, то потом сами исправите. Сейчас есть такая интересная штука, как flexbox. . Поэтому или менять блок с абсолютным позиционированием на иное, или оставить как есть.
Svetlanka, есть разные mobile detect для вордпресса. Но, лучше вам выбрать нормальную адаптивную тему для себя и уже под себя все настроить.