Summary App using flex

Greetings!

• To solve these problems, you can start by using max-width and min-height instead of width and height, since this way the content is expanded or reduced if necessary.
• The problem with the media query is that you defined the measurements wrong, you should assign it to 815px instead of 375px. I also advise that for media queries you do not define it in px but in rem
• Your <div class="attribution"> should be <footer class="attribution">
• You don't need position to center the content, you can use the following in your body:

body {
     background-color: hsl(221, 100%, 96%);
     font-family: 'Hanken Grotesk', sans-serif;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 20px;
}

• With these changes your <div class="border"> should be your <main class="border"> and your old main should be deleted since it is of no use