How do you make text align in a div on Tailwind: I have tried...
- items-start
- text-left
- float-left
on both the child and the parent component but the text will not budge and stays stuck in the middle.
The logo with "Web For Professionals" stays stuck in the middle of the div and will not align to the left whatever I try, does anyone know how to force it to align to the left?
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900 sticky top-0 z-50 text-left items-start">
<div class="container flex flex-wrap justify-between items-start text-left">
<a href="https://webforprofessionals.com/" className="flex items-start text-left">
<img src="https://i0.wp.com/webforprofessionals.com/wp-content/uploads/2020/09/cropped-facebooklogo.jpg?resize=202%2C99&ssl=1" class="mr-3 h-6 sm:h-9" alt="Web For Professionals Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Web For Professionals</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
</div>
</div>
</nav>