style.css

*{
    margin: 0;
    font-family: arial;
    border:border-box;
 }
 .navbar{
   height: 60px;
   background-color: black;
   justify-content: space-evenly;
   display: flex;
   align-items: center;
   color: white;
 }
 .ul-main {
   display: flex;
   justify-content: space-evenly;
   text-align: center;
 }
 .nav-search {
   display: flex;
   justify-content:space-evenly;
   width: 350px;
   height: 30px;
   border-radius: 10px;
}
.search-input {
      width: 70%;
      font-size: 1rem;
      border: none;
      border-radius: 10px;
}
.search-icon {
      width: 50px;
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
}
/** panel **/
.panel {
   height: 40px;
   background-color:#222f3d;
   display: flex;
   color: white;
   align-items: center;
   justify-content:space-evenly ;
}

.panel-ops p {
     display: inline;
     margin-left: 15px;
}

.panel-ops {
     width: 70%;
     font-size: 0.85rem;
}
.panel-deals {
     font-size: 0.9rem;
     font-weight: 700;
}
img {
   height: 500px;
   width: 100%;
   background-size: cover;
}
/** shop section **/
.shop-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   background-color: #e2e7e6;
}
.box {
   height: 320px;
   width: 24%;
   /* background-color: #e2e7e6; */
   padding: 20px 0px 15px;
   margin-bottom: 10px;
   
}

.p {
   height: 60px;
   width: 35px;
}

.box2 img{
   height: 270px;
   width: 100%;
}
.box1 img{
   height: 270px;
   width: 100%;
}
.box3 img{
   height: 270px;
   width: 100%;
}
.box4 img{
   height: 270px;
   width: 100%;
}