styles.css

html, body { height: 100%; width: 100%; margin: 0; }

body{
    background-color: #fff;
}
/* Navigation bar */
#navBarSearchForm input[type=text]{width:60% !important;}
.navdiv{
    display: grid;
    grid-template-columns: 20% 60% 20%;
}
.navdiv .item2{

}

.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
/*The container for displaying food items */

.main{
    display: flex;
    margin-top: 5%;
    margin-left: 5%;
    height: 100%;
}
/*Cards for the items*/
.cards{
    display: inline-grid;
    width: 30%;
    grid-template-columns: 45% 55%;
    grid-template-rows: 100%;
    float: left;
    height: 20%;
    margin-right: 5%;
    margin-bottom: 2%;
}
.items{
    box-sizing: border-box;
}
.item1{
    height: 100%;
    grid-column:1/2 ;
    background-color: green;
}
.item2{
    grid-column: 2/3;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    border: 2px solid black;
    background-color: blue;
}

/*For customizing sections of the page*/
.section{
    width: 100%;

}
/*Header for each sections*/
.section h3{
    margin-bottom: 2%;
}