Good day to all. When designing your portfolio page I ran into a problem. The point is this: we have a page with max-width: 100%; and we have a header on it with the same max-width . Then we add a picture on top of this header'а . Margin'ом set a specific position for this image. We get this picture: enter image description here

The most interesting thing comes when we begin to change the width of the page, it turns out this rubbish: enter image description here

This happens after the edge of the window reaches the picture. Help with problem solving, please.
  <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; }
  • If the edge of the window reaches the picture, then why is the screenshot with the rubbish so wide? - mJeevas pm
  • For clarity, increased the image indent from the edge. - twinpixxx
  • How was the "specific position" of the picture? - mJeevas 5:57 pm
  • What is your role max-width: 100%? Why use it and mention it here - mJeevas 5:59 pm
  • one
    Everything is better to be accompanied by code examples, laying it out on jsfiddle or codepen - Jarvis

2 answers 2

You have a picture margin-left: 300px; when the screen size becomes smaller, the picture remains at this value, and the header size decreases.
If you use the margin and rely on adaptive layout, it is better to set the relative margin to% or vw in the margin, then your picture will roll along the header without any overhangs.
300px is a fixed value, respectively, either change the condition in the margin, or create an @media media query for the extension below and set the version with other margin parameters there. And for a smooth transition, you can use the transition in this case.

    Maybe so? Your code is not very clear: I contributed it to the editor and did not see any problem

     #header{ position: relative; background: url(../img/header-bg.png) rgb(240,73,73); height: 3.75em; padding: 5px 0; } #header img { display: block; position: absolute; width: 60px; height: 60px; left: 300px; } 
     <div id="header"> <img src="https://i.stack.imgur.com/WZsJn.jpg?s=48&g=1" alt="Profile pho"> </div>