https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-52

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-57

step 60: when the page is narrow, the text "falls out of" the colored background, why? overflow? why isn't the content box stretching to fit it?

why do we know that there's enough room for the table headers/captions and they'll always align correctly across devices? because we used rem both to positoin the text and also to define the margin top?

step 62: neg margins means the text is allowed to overflow out of the side??

span[class~="sr-only"] {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  -webkit-clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  padding: 0;
  margin: -1px;
}

• why not width and height 0?
• what does white space do?
• what does -1 margin do?
• how clip works