Regarding responsive website issue

hi i am posting below my code i tried a lot to make it responsive but couldn’t please someone help me out

index.html

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Coffee with MJ</title>

<!-- Latest compiled and minified CSS -->
<link rel="icon" href="./images/Free_Sample_By_Wix (1).jpg" />

<link rel="stylesheet" href="styles.css" />
<header class="header">

  <nav>

    <img class="logo" src="./images/coffee logo.png" alt="logo" />

    <ul>

      <li><a href="#">Home</a></li>

      <li><a href="#">Coffee</a></li>

      <li><a href="#">Desserts</a></li>

      <li><a href="#">About us</a></li>

      <li><a href="#">Contact</a></li>

    </ul>

  </nav>

</header>

<div class="welcome-message">

  <h1 class="welcome">Welcom to MJ's Cafe</h1>

  <p>Taste the Best coffee in the Morning</p>

</div>

<section>

  <div class="container">

    <h1>Explore the Menu</h1>

    <div class="breakfast">

      <div class="imgbox">

        <img class="images" src="./images/b-2.jpeg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-4.jpeg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-7.jpg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-8.jpg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-9.jpg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-10.jpg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-3.jpg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

      <div class="imgbox">

        <img class="images" src="./images/b-6.jpeg" alt="" />

        <h2>Delicious Pancake</h2>

        <p>$ <span>13.50</span></p>

      </div>

    </div>

  </div>

</section>

<section>

  <div class="container" id="loptions">

    <h1>Lunch Options</h1>

  

  <div class="lunch">

    <div class="imgbox">

      <img class="images" src="./images/b-11.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-12.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-13.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-14.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-15.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-16.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-17.jpeg" alt="" />

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

    <div class="imgbox">

      <img class="images" src="./images/b-18.jpeg" alt="" >

      <h2>Delicious Pancake</h2>

      <p>$ <span>13.50</span></p>

    </div>

  </div>

</div>

</section>

<section class="ot">
<div class="title">

<h1>Our Team</h1>


<div class="cards">

    <div class="imgbox">

        <img class="imag" src="./images/m1 (1).JPG" alt="#">

    </div>

    <div class="description">

        <h1>Name</h1>

        <p>Describe something about</p>

        <button class="btn">Read More</button>

    </div>

</div>

<div class="cards">

    <div class="imgbox">

        <img class="imag" src="./images/m1 (2).JPG" alt="#">

    </div>

    <div class="description">

        <h1>Name</h1>

        <p>Describe something about</p>

        <button class="btn">Read More</button>

    </div>

</div>

<div class="cards">

    <div class="imgbox">

        <img class="imag" src="./images/m1 (3).JPG" alt="#">

    </div>

    <div class="description">

        <h1>Name</h1>

        <p>Describe something about</p>

        <button class="btn">Read More</button>

    </div>

</div>
</section>

<section>

  <div class="container">

    <h1>Contact Us</h1>

    <div class="contact-form">

      <form action="" class="details"></form>

    </div>

  </div>

</section>

<!-- jQuery library -->

styles.css

@import url(“https://fonts.googleapis.com/css2?family=Sriracha&display=swap”);

@import url(“https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&display=swap”);

  • {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    text-decoration: none;

    list-style: none;

}

body {

background-image: url(./images/bg1.jpg);

background-repeat: no-repeat;

background-size: cover;

height: 100vh;

background-attachment: fixed;

scroll-behavior: smooth;

}

.header {

width: 100%;

margin-top: 30px;

}

nav {

width: 100%;

background-color: rgba(0, 0, 0, 0.4);

height: 130px;

line-height: 130px;

}

nav ul {

float: right;

margin-right: 30px;

font-family: “Sriracha”, cursive;

}

nav ul li {

display: inline-block;

font-size: 25px;

}

nav ul li a {

color: white !important;

padding: 30px;

transition: 0.5s ease-in-out;

text-decoration: none !important;

}

nav ul li a:hover {

background-color: rgba(230, 149, 74, 0.4) !important;

padding: auto;

border-radius: 20%;

}

.logo {

width: 100px;

height: 80px;

border-radius: 50%;

margin-left: 15px;

margin-top: 10px;

}

.welcome-message {

color: white;

text-align: center;

display: flex;

flex-direction: column;

margin: 200px;

letter-spacing: 1px;

background-color: rgba(0, 0, 0, 0.4);

height: 400px;

width: 500px;

box-shadow: 2px 2px rgb(65, 61, 61);

}

.welcome-message:hover {

background-color: rgba(223, 167, 63, 0.4);

}

.welcome-message h1 {

font-size: 65px;

padding: 30px;

font-family: “Dancing Script”, cursive;

text-shadow: 2px 2px rgb(192, 189, 189);

}

.welcome-message p {

font-size: 30px;

padding-top: 50px;

font-family: “Dancing Script”, cursive;

text-shadow: 2px 2px rgb(192, 189, 189);

}

.container {

width: 100%;

height: 100%;

background: linear-gradient(rgba(73, 206, 206, 0.6), rgba(0, 0, 0, 0.6));

display: flex;

justify-content: center;

position: relative;

margin: 320px 0;

padding-bottom: 30px;

}

#loptions {

background: linear-gradient(rgba(153, 238, 15, 0.6), rgba(223, 202, 14, 0.4));

}

.container h1 {

display: flex;

margin-top: 30px;

position: absolute;

font-size: 50px;

color: #fff;

font-family: “Dancing Script”, cursive;

font-weight: 800;

transition: 0.3s ease-in;

}

.container h1:hover {

background-color: rgb(233, 223, 133, 0.7);

border-radius: 20px;

padding: 10px;

}

.breakfast,

.lunch {

display: flex;

flex-wrap: wrap;

flex-direction: row;

align-items: center;

justify-content: center;

margin-top: 150px;

}

.breakfast .imgbox,

.lunch .imgbox {

padding: 0 20px 0 20px;

height: 350px;

transition: 0.4s ease-in;

}

.imgbox .images {

height: 260px;

width: 260px;

box-shadow: 0px 5px 220px rgb(112, 104, 104);

border-radius: 50%;

}

.imgbox:hover {

background: rgba(216, 164, 34, 0.8);

border-radius: 4px;

}

.imgbox h2,

.imgbox p {

color: white;

font-family: “Dancing Script”, cursive;

text-align: center;

font-size: 25px;

background-color: rgb(71, 119, 103, 0.7);

border-radius: 4px;

margin-top: 5px;

}

.ot {

background-color: rgba(255, 255, 255, 0.8);

}

.main {

width: 100%;

height: 100%;

display: flex;

flex-flow: row wrap;

justify-content: space-evenly;

margin-top: auto;

position: relative;

}

.title {

position: absolute;

height: 80vh;

line-height: 80px;

}

.title h1 {

text-align: center;

margin: 40px;

font-size: 50px;

color: rgb(8, 8, 8);

font-family: “Dancing Script”, cursive;

font-weight: 800;

transition: 0.3s ease;

}

.title h1:hover{

background-color: rgba(17, 138, 17, 0.7);

border-radius: 50px;

padding: 20px;

}

.cards {

width: 25%;

background-color: white;

display:inline-block;

margin: 250px 0;

border-radius: 5px;

box-shadow: 2px 2px 10px rgb(19, 18, 18);

}

.imgbox img {

width: 100%;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

}

img {

width: 360px;

height: 300px;

}

.description {

text-align: center;

}

.description h1 {

padding: 10px !important;

}

.description p {

font-size: 18px !important;

}

.btn {

padding: 5px;

margin: 20px 0;

border-radius: 8px;

background-color: rgb(247, 223, 7);

font-size: 18px;

}

.btn:hover {

background-color: rgb(65, 247, 65);

color: white;

transition: 0.5s ease-in;

cursor: pointer;

}

@media only screen and (min-width: 320px) and (max-width: 480px) , (orientation: portrait) {

.imgbox .images {

width: 85%;

}

}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)

{

.imgbox .images {

width: 85%;

}

}

Hi, have a look at how I added some responsive features to this Webstyle: https://www.vitainbeta.org/2020/08/13/a-simple-website-style-guide/