I am having trouble adjusting the width of my header's columns to be 24vw, 24vw, 4vw, 24vw, and 24vw respectively. Despite specifying these widths, the browser is rendering all columns with equal width. Specifically, I am unable to change the width of the centered div for some unknown reason. The issue only arises when using grid template areas; without them, everything works fine. Why is this happening? Any guidance would be greatly appreciated.
HTML code:
<div class="head-grid-container">
<!-- This will be my white banner area. Logos and place name will go here. -->
<div class="logo-section">
<div class="logo"><img src="government-logo.png" /></div>
<div class="name"><h2 style="font-family: 'Kalam', cursive;">Durbar</h2></div>
<div class="logo"><img src="../Visual/logo.png" /></div>
<div class="name"><h2 style="font-family: 'La Belle Aurore', cursive;">Durbar</h2></div>
<div class="logo"><img src="world-heritage-site-logo.png" /></div>
</div>
<!-- This will be my red banner area. Navigation links will go here. -->
<div class="links-section">
<div class="links-left"><h2 class="left">Palace</h2></div>
<div class="links-left"><h2 class="left">Museum</h2></div>
<div class="center-logo"><img src="../Visual/home.svg" /></div>
<div class="links-right"><h2 class="right">Supervision Office</h2></div>
<div class="links-right"><h2 class="right">Development Committee</h2></div>
</div>
<!-- This will be my yellow section -->
<div class="showcase-section">
<div class="links-left"></div>
<div class="links-left"></div>
<div class="center-logo"></div>
<div class="links-right"></div>
<div class="links-right"></div>
</div>
</div>
CSS code:
/* heading grid container customisation */
.head-grid-container{
display: grid;
height: 20vh;
width: 100vw;
grid-template-columns: 24vw 24vw 4vw 24vw 24vw;
grid-template-rows: 13vh 6vh 1vh;
grid-template-areas:
"white white white white white"
"red red red red red"
"yellow yellow yellow yellow yellow";
}
/* make all the boxes inside the grid table float next to each other using display as flex */
.logo-section{
grid-area: white;
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
box-shadow: 2px 8px 8px -6px #141414;
z-index: 5;
}
.links-section{
grid-area: red;
display: flex;
justify-content: space-between;
background-color: #d30d0d;
z-index: 4;
color:#f5f5f5;
font-family: 'Bebas Neue', cursive;
letter-spacing: 0.3em;
box-shadow: 0px 5px 4px -6px #141414;
}
.showcase-section{
grid-area: yellow;
display: flex;
justify-content: space-between;
background-color: #fec52a;
z-index: 3;
}
/* make the contents inside grid present at the center of the table */
.logo-section>div, .links-section>div{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* image width modification */
.logo>img{
height: 80px;
}
.center-logo>img{
height: 30px;
}
/*apply shadows to borders*/
.links-left{
box-shadow: -5px 0px 20px -3px #141414;
}
.links-right{
box-shadow: 5px 0px 20px -3px #141414;
}
.center-logo{
box-shadow: 5px 0px 20px -3px #141414, -5px 0px 20px -3px #141414;
}