Проблемы с адаптивной версткой

Всем доброго времени суток. При верстке своей портфолио страницы столкнулся с проблемой. Суть такая: мы имеем страницу с max-width: 100%; и имеем на ней header с таким же max-width. Затем мы добавляем поверх этого header'а картинку. Margin'ом задаем определенную позицию для этой картинки. Получаем такую картину:

Самое интересное наступает тогда, когда мы начинаем менять ширину страницы, получается вот такая белиберда:

Такое происходит после того, как край окна доходит до картинки. Помогите с решением проблемы, пожалуйста.

    <div id="header">
    <img src="img/profile-ph.png" alt="Profile pho">
    </div>

#header{
    background: url(../img/header-bg.png) rgb(240,73,73);
    height: 3.75em;
}
#header img{
    margin-top: 5px;
    margin-left: 300px;
}