div container not going full width on mobile device using nextjs tailwindcss

Question

I am trying to achieve where my div would go stretch or go full width the same as with my table, I have tried using max-w-full w-screen and w-full however the div is not stretching up until the end..

this is my code for the page.

SampleTest.js

import React, { useState } from "react";

function SampleTest() {
  const [getValue, setValue] = useState();
  return (
    <>
      <div className="w-full overflow-x-auto shadow-md sm:rounded-lg">
// this is the div that does not stretch up until the end or does not affect ``w-full``
        <div className="max-w-full p-4 bg-white dark:bg-gray-800">
          <label
            htmlFor="countries"
            className="mb-2 text-sm font-medium text-gray-900 dark:text-white px-2"
          >
            Filter
          </label>
          <select
            id="countries"
            defaultValue={"DEFAULT"}
            value={getValue}
            onChange={(e) => {
              setValue(e.target.value);
            }}
            placeholder="select me"
            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          >
            <option value="DEFAULT" disabled>
              Choose Filter
            </option>
            <option value="Verified">Verified</option>
            <option value="Pending">Pending</option>
            <option value="Disabled">Disabled</option>
          </select>
        </div>
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
              <th scope="col" className="p-4"></th>
              <th scope="col" className="px-6 py-3">
                Name
              </th>
              <th scope="col" className="px-6 py-3">
                Position
              </th>
              <th scope="col" className="px-6 py-3">
                Status
              </th>
              <th scope="col" className="px-6 py-3">
                Action
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
              <td className="w-4 p-4"></td>
              <th
                scope="row"
                className="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white"
              >
                <img
                  className="w-10 h-10 rounded-full"
                  src="https://fakeimg.pl/350x200/?text=World&font=lobster"
                  alt="Jese image"
                />
                <div className="pl-3">
                  <div className="text-base font-semibold">Neil Sims</div>
                  <div className="font-normal text-gray-500">
                    neil.sims@flowbite.com
                  </div>
                </div>
              </th>
              <td className="px-6 py-4">React Developer</td>
              <td className="px-6 py-4">
                <div className="flex items-center">
                  <div className="h-2.5 w-2.5 rounded-full bg-green-500 mr-2"></div>{" "}
                  Online
                </div>
              </td>
              <td className="px-6 py-4">
                <a
                  href="#"
                  type="button"
                  className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                >
                  Edit user
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  );
}

export default SampleTest;

and I think my meta tag is already good. this is my meta tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 1

try adding flex w-full to the div you want to stretch