as for now i have this 2 components ...nav and home ....import React, { useState } from 'react'import { FaBars, FaTimes } from "react-icons/fa";export const Navbar = () => { const [nav,setNav] = useState(false); const links = [ { id: 1, link: 'home' }, { id: 2, link: 'about' }, { id: 3, link: 'portfolio' }, { id: 4, link: 'experience' }, { id: 5, link: 'contact' }, ] return ( <div className='flex justify-between items-center px-4 bg-black w-full h-20 text-white fixed'> <div> <h1 className='text-5xl font-signature ml-2'>John Maina</h1> </div> <ul className='hidden md:flex'> {links.map(({id, link}) => ( <li key={id} className='cursor-pointer px-4 capitalize font-medium text-gray-500 hover:scale-105'> {link} </li> ))} </ul> <div onClick={() => setNav(!nav)} className='pr-4 text-gray-500 cursor-pointer z-10 md:hidden'> {nav ? <FaTimes size={30}/>: <FaBars size={30}/> } </div> {nav && ( <ul className='flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-black to-gray-800 text-gray-500'> {links.map(({id, link}) => ( <li key={id} className='px-4 cursor-pointer capitalize py-6 text-4xl'> {link} </li> ))} </ul> )} </div> )}and home ....import React from 'react'import ME from '../assets/heroImage.png'import { MdOutlineArrowRightAlt } from "react-icons/md";export const Home = () => { return ( <div name='home' className=' h-screen w-full bg-gradient-to-b from-black via-black to-gray-800 '> <div className='max-w-screen-lg mx-auto flex flex-col items-center justify-center h-full px-4 md:flex-row'> <div className='flex flex-col justify-center h-full'> <h2 className='text-4xl sm:text-7xl font-bold text-white'> I'm a Full Stack Developer </h2> <p className=' text-gray-500 py-4 max-w-md'> I have 4 years of experience building and desgining softwares. Currently, i I love to work on web applications using technologies like; React, Tailwind, Django, Laravel and mySQL. </p> <div> <button className=' group text-white w-fit px-6 py-3 my-2 flex items-center rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 cursor-pointer'> Portfolio <span className=' group-hover:rotate-90 duration-300'> <MdOutlineArrowRightAlt size={25} className=' ml-1'/> </span> </button> </div> </div> <div> <img src={ME} alt="me" className='rounded-2xl mx-auto w-2/3 md:w-full'/> </div> </div> </div> )}...now the content of the home is starting at the top which make it go under my nave since i have nave fixed .... actualy when on a laptop thimgs are okay but on the phone the content is starting at the top hence going under the nav how can i make it appear after nave on mobile

.home-content {
  margin-top: 20px; /* Adjust this value to create space between the navbar and content */
}

@media (min-width: 768px) {
  .home-content {
    margin-top: 0; /* Reset the margin for larger screens */
  }
}