Issue 2: I am not familiar with making mobile-friendly sites yet and @media queries are still confusing to me. How to remove this from my site and set a certain width so that I would not be able to scroll to the right and see this blank space?
Issue 3: I have figured out on desktop how to keep the image from breaking apart from the rest of the body – by setting a max-width: 1080px and margin:0 auto; property to the body element in CSS. However, on mobile, even though I used a media query and used flexbox and centered all the elements, the img and text are not aligned with the rest of the page.
2, 3. First, give your html box-sizing: border-box. The paddings and margins are all accounted in a given width.
Remove width from your #signup paragraph.
Don’t give set height and width to your pizza image. Remove margin-left, border then give it width:100%;
Giving your elements set width and height is not a good idea when you are building mobile responsive pages. Use relative units like em or rem and percentages when you are defining height and widths of elements. Give box-sizing:boder-box for intuitive box-model layouts.
