Recipe page using CSS #

What specific areas of your project would you like help with?

I need feedback on managing the width of a container as the screen size decreases. I've set max-width: 50%, which looks fine on larger screens, but it behaves oddly on smaller screens. To fix this, I currently use a media query at 1000px to make the container full width, but I'm not entirely comfortable with that approach. I'd appreciate suggestions on better ways to handle this.

Additionally, I don't fully understand border-collapse in tables. When I don’t include the following CSS:

.recipe__nutrition-table {
  width: 100%;
  border-collapse: collapse;
}

the borders don't appear at all, which seems strange to me. Can someone explain why this happens?

Why is the preview photo showing a white background at the bottom 20% of my page, while the live site displays correctly?

Can I get an explanation for this difference?