Prevent horizontal scrolling

/* ❌ Problem: fixed width causes overflow on small screens */
.container {
  width: 1200px;
}
 
/* ✅ Fix: max-width with full fluid width */
.container {
  max-width: 1200px;
  width: 100%;
}

/* ❌ Problem: intrinsic image width overflows container */
img {
  /* no width constraints */
}
 
/* ✅ Fix: images constrained to their container */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ❌ Problem: long URLs or code strings overflow text containers */
.content {
  /* no word-break rules */
}
 
/* ✅ Fix: allow breaking of long words */
.content {
  overflow-wrap: break-word;
  word-break: break-word; /* fallback for older browsers */
}

/* ❌ Problem: 100vw includes scrollbar width, causing horizontal overflow */
.hero {
  width: 100vw;
}
 
/* ✅ Fix: use 100% relative to the parent */
.hero {
  width: 100%;
}

<!-- ✅ Correct: table wrapped in scrollable container -->
<div style="overflow-x: auto;" role="region" aria-label="Sales data">
  <table>
    <!-- wide table content -->
  </table>
</div>