<div class="container">
  <h1>Responsive Title</h1>
  <p>This text will wrap within the container as the viewport narrows or the page is zoomed. No horizontal scrolling should be required to read this content.</p>
  <img src="/wp-content/uploads/product_widget.svg" alt="A descriptive alt text" class="responsive-img">
</div>

<style>
  body { margin: 0; font-size: 1rem; line-height: 1.5; }
  .container {
    width: 90%; /* Fluid width */
    max-width: 1200px; /* Optional max width */
    margin: 1em auto; /* Centering and vertical space */
    padding: 1em;
    border: 1px solid #ccc;
  }
  h1 { font-size: 2rem; }
  p { margin-bottom: 1em; }
  .responsive-img {
    max-width: 30%; /* Image scales down */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Avoid extra space below */
  }
  /* Example using Flexbox for columns that stack on small screens */
  .flex-container { display: flex; flex-wrap: wrap; gap: 1em; }
  .flex-item { flex: 1 1 300px; /* Grow, shrink, basis */ background: #eee; padding: 1em; }
</style>

<div class="container-fixed">
  <h1>Fixed Width Content</h1>
  <p>This paragraph is inside a container with a fixed width of 800px. On a 320px wide screen or with high zoom, you will likely need to scroll horizontally to read the full lines.</p>
  <table>
    </table>
</div>

<style>
  .container-fixed {
    width: 800px; /* Fixed width causes horizontal scrolling */
    margin: 1em auto;
    padding: 1em;
    border: 1px solid #ccc;
  }
  /* If the table itself is wider than the viewport, it will also cause issues */
  table { width: 900px; border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 0.5em; }
</style>