Hi, you should be able to add margin-top: 20px (for example) after the margin: auto; line. CSS takes precedence in order of lines. A good way to troubleshoot CSS is to right-click the element you want to work on (the image in this case, and inspect) look for the styles tab, and try out different CSS settings in real-time by editing element.style. For margin and padding remember TeRriBLe for the top,right,bottom,left order of editing for example, this might work for you… margin: 20px, auto, 0px, auto
(Top,Right,Bottom,Left- terrible!) Apologies if you know all this already…
@SidVal you can clearly observe that when we give margin-top value the headcontainer is also moving. you can notice the background color. what i want is margin from the headcontainer div , so that the background stays and the image is placed in that little down from top.
add display:inline-block; to your container element…
I grabbed this from Mozilla docs (default position is static):
If the position property is static or relative, the containing block is formed by the edge of the content box of the nearest ancestor element that is a block container (such as an inline-block, block, or list-item element) or which establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
Basically- a block goes rogue unless it is inside another block-type element. The additional padding you’ll see around the container when you apply this is from the body element I think. As a rule of thumb your containers should be blocks I guess…