For your issue with the header images, you can set a negative left/right margin. The max-width on the header-wrapper is not allowing the images to go over to the edge of the screen. There must be anoter property that is minimizing the pictures when you remove it (I tried in inspect). I was able to acheive it by applying the css below. You can try this to see the expect result. From there you can try to fix the issue with removing max-width.
.left-image { margin-left: -32px; } .right-image { margin-right: -32px; }
.header-wrapper { display: flex; /* flex-direction: row; This is the default so it can be omitted*/ justify-content: space-between; /* < add this to push the images to the edges of the screen / min-width: 100vw; / < I changed this to "min" instead of max since removing width specification minimizes the images; you'll have to troubleshoot that */ align-items: center; }
This will get you started with how to move things out of their container.
Marked as helpful
