title: Having Issue in setting up my searchbar in right place
body: <p>I am new to react development, I am doing an online course but I am facing some issues,  I think I messed up some div's. It would be a great help if u point the line where i made the error. Thanks</p>
  <p>what I expected the search bar to go like this
  <a href="https://i.stack.imgur.com/2c6Kq.png" rel="nofollow noreferrer">Output</a></p>
  <p>But instead, I ended up like this
  <a href="https://i.stack.imgur.com/WrS8v.png" rel="nofollow noreferrer">my view</a></p>
  <p>My index.js code</p>
  <pre><code>import Image from 'next/image';
  import { useTheme } from 'next-themes';
  import { Banner, CreatorCard, NFTCard } from '../components';
  import { makeid } from '../utils/makeId';
  
  import images from '../assets';
  
  const Home = () =&gt; {
    const [hideButtons, sethideButtons] = useState(false);
    const { theme } = useTheme();
    const parentRef = useRef(null);
    const scrollRef = useRef(null);
  
    const handleScroll = (direction) =&gt; {
      const { current } = scrollRef;
  
      const scrollAmount = window.innerWidth &gt; 1800 ? 270 : 210;
  
      if (direction === 'left') {
        current.scrollLeft -= scrollAmount;
      } else {
        current.scrollLeft += scrollAmount;
      }
    };
  
    const isScrollable = () =&gt; {
      const { current } = scrollRef;
      const { current: parent } = parentRef;
  
      if (current?.scrollWidth &gt;= parent?.offsetWidth) {
        sethideButtons(false);
      } else {
        sethideButtons(true);
      }
    };
  
    useEffect(() =&gt; {
      isScrollable();
      window.addEventListener('resize', isScrollable);
  
      return () =&gt; {
        window.removeEventListener('resize', isScrollable);
      };
    });
  
    return (
      &lt;div className=&quot;flex justify-center sm:px-4 p-12&quot;&gt;
        &lt;div className=&quot;w-full minmd:w-4/5&quot;&gt;
          &lt;Banner
            name=&quot;Discover, collect, and Sell extraordinary NFTs&quot;
            childStyles=&quot;md:text-4xl sm:text-2xl xs=text-xl text-left&quot;
            parentStyles=&quot;justify-start mb-6 h-72 sm:h-60 p-12 xs:p-4 xs:h-44 rounded-3xl&quot;
          /&gt;
          &lt;div&gt;
            &lt;h1 className=&quot;font-poppins dark:text-white text-nft-black-1 text-2xl minlg:text-4xl font-semibold ml-4 xs:ml-0&quot;&gt;Best Creators&lt;/h1&gt;
            &lt;div className=&quot;relative flex-1 max-w-full flex mt-3&quot; ref={parentRef}&gt;
              &lt;div className=&quot;flex flex-row w-max overflow-x-scroll no-scrollbar select-none&quot; ref={scrollRef}&gt;
                {[6, 7, 8, 9, 10].map((i) =&gt; (
                  &lt;CreatorCard
                    key={`creator-${i}`}
                    rank={i}
                    creatorImage={images[`creator${i}`]}
                    creatorName={`0x${makeid(3)}...${makeid(4)}`}
                    creatorEths={10 - i * 0.5}
                  /&gt;
                ))}
                {!hideButtons &amp;&amp; (
                  &lt;&gt;
                    &lt;div onClick={() =&gt; handleScroll('left')} className=&quot;absolute w-8 h-8 minlg:w-12 minlg:h-12 top-45 cursor-pointer left-0&quot;&gt;
                      &lt;Image
                        src={images.left}
                        layout=&quot;fill&quot;
                        objectFit=&quot;contain&quot;
                        alt=&quot;left_arrow&quot;
                        className={theme === 'light' &amp;&amp; 'filter invert'}
                      /&gt;
                    &lt;/div&gt;
                    &lt;div onClick={() =&gt; handleScroll('right')} className=&quot;absolute w-8 h-8 minlg:w-12 minlg:h-12 top-45 cursor-pointer right-0&quot;&gt;
                      &lt;Image
                        src={images.right}
                        layout=&quot;fill&quot;
                        objectFit=&quot;contain&quot;
                        alt=&quot;right_arrow&quot;
                        className={theme === 'light' &amp;&amp; 'filter invert'}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mt-10&quot;&gt;
            &lt;div className=&quot;flexBetween mx-4 xs:mx-0 minlg:mx-8 sm:flex-col sm:items-start&quot;&gt;
              &lt;h1 className=&quot;flex-1 font-poppins dark:text-white text-nft-black-1 text-2xl minlg:text-4xl font-semibold sm:mb-4&quot;&gt;Hot Bids&lt;/h1&gt;
              &lt;div&gt;SearchBar&lt;/div&gt;
              &lt;div className=&quot;mt-3 w-full flex flex-wrap justify-start md:justify-center&quot;&gt;
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) =&gt; (
                  &lt;NFTCard
                    key=&quot;nft-$(i)&quot;
                    nft={{
                      i,
                      name: `Nifty NFT ${i}`,
                      price: (10 - i * 0.534).toFixed(2),
                      seller: `0x${makeid(3)}...${makeid(4)}`,
                      owner: `0x${makeid(3)}...${makeid(4)}`,
                      description: 'cool NFT on Sale',
                    }}
                  /&gt;
                ))}
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  
  </code></pre>