Input Box component and buttons are too small to apply md: despite having md:w-* classes

I'm working on a responsive navbar using React and Tailwind CSS for my course-selling website. The layout contains:

1. A logo on the left.
2. A search input box and search button in the right (visible only on medium screens and above).

The search input box (InputBox component) remains too small on all screen sizes, even after applying Tailwind responsive classes like md:w-64. It looks as if it’s constrained by the parent layout or not respecting the defined width classes.

Navbar.jsx

import { GiHamburgerMenu } from "react-icons/gi";import { CgSearch } from "react-icons/cg";import Button1 from "../buttons/button1";import InputBox from "../Input/InputBox";const Navbar = () => {  const toggleBurger = () => {    //hamburger logic here  };  const handleRegistration = () => {    //registration logic  };  const handleLogin = () => {    //login logic  };  return (<div className="w-full h-20 shadow-md flex justify-between p-4 items-center"><div className="flex items-center gap-6 "><div><GiHamburgerMenu            className="text-4xl cursor-pointer block md:hidden"            onClick={toggleBurger}          /></div><div className="text-2xl font-semibold"><a href="#" className="logo-font text-logoColor">            CourseNest <span className="text-logoDot">.</span></a></div></div><div className="flex justify-center items-center"><InputBox Type={`text`} Placeholder={`type here to search`} /><button className="md:block   md:rounded-r-md md:bg-slate-100  md:py-3 md:px-4  md:border md:border-gray-300 md:outline-none md:text-xl mr-5"><CgSearch /></button><div className="flex items-center gap-5"><Button1 name={`Regisrer`} onclick={handleRegistration} /><Button1 name={`Login`} onclick={handleLogin} /></div></div></div>  );};export default Navbar;

InputBox.jsx

/* eslint-disable react/prop-types */const InputBox = ({ Type, Placeholder }) => {  return (<div className="flex items-center "><input        type={Type}        placeholder={Placeholder}        className="md:w-64 md:rounded-l-md md:bg-slate-100  md:py-2 md:px-5  md:border md:border-gray-300 md:outline-none md:text-xl"      /></div>  );};export default InputBox;

Button1.jsx

/* eslint-disable react/prop-types */const Button1 = ({ name, onclick }) => {  return (<div      className="py-3 px-6 bg-primaryButton text-white rounded-lg cursor-pointer hover:opacity-80"      onClick={onclick}>      {name}</div>  );};export default Button1;

here is the screenshot for better understanding the problem-