title: Tailwind Container Not Working at SM Devices
body: <p>this is my first time to using tailwind<br />
  But i got some problem to build a responsive website<br />
  The container is not working at Small devices<br />
  It works at Medium devices like this: <a href="https://i.stack.imgur.com/Nnp8c.png" rel="nofollow noreferrer">Medium Device</a> <br/>
  And this one is at Small devices: <a href="https://i.stack.imgur.com/CEBZ2.png" rel="nofollow noreferrer">Small Device</a> <br />
  There is the code:<br /></p>
  <pre><code>    &lt;div className=&quot;bg-blackColor min-h-screen&quot;&gt;
        &lt;div className=&quot;container mx-auto py-10&quot;&gt;
          &lt;div className=&quot;flex justify-between&quot;&gt;
            &lt;div className=&quot;flex flex-[2_2_0%] items-center justify-between&quot;&gt;
              &lt;div className=&quot;flex-1&quot;&gt;
                &lt;img src={EnverLogo} alt=&quot;Logo&quot; className=&quot;w-[130px] h-[40px]&quot; /&gt;
              &lt;/div&gt;
              &lt;ul className=&quot;lg:flex justify-between flex-1 hidden&quot;&gt;
                &lt;li className=&quot;text-lg font-bold hover:text-whiteColor text-primaryColor&quot;&gt;Home&lt;/li&gt;
                &lt;li className=&quot;text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor&quot;&gt;Services&lt;/li&gt;
                &lt;li className=&quot;text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor&quot;&gt;Our Project&lt;/li&gt;
                &lt;li className=&quot;text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor&quot;&gt;About Us&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;lg:flex flex-1 items-center justify-end hidden&quot;&gt;
              &lt;div className=&quot;w-[160px] h-[35px] border-2 border-whiteColor rounded-md backdrop-blur-md&quot; /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>