I'm facing an issue with customizing my HTML layout using grids. I want my nav element to occupy the entire available width.
Below is my current code:
header {
text-align: center;
grid-area: header;
border: solid;
}
#nav1 {
text-decoration: none;
border: solid;
background-color: green;
grid-area: MH;
width: 1fr;
text-align: center;
}
#nav2 {
text-decoration: none;
border: solid;
background-color: red;
grid-area: MC;
width: 1frs;
text-align: center;
}
#nav3 {
text-decoration: none;
border: solid;
background-color: yellow;
grid-area: start;
width: 1fr;
text-align: center;
}
footer {
grid-area: footer;
border: solid;
background-color: orange;
margin-top: 0px;
height: 100px;
}
main {
text-decoration: none;
border: solid;
background-color: gray;
grid-area: main;
height: 500px;
color: #ff00eb;
border-color: black;
}
aside {
width: 0.5fr;
border: solid;
background-color: purple;
grid-area: aside;
}
#big-container,
nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'header header header' 'MH MC start' 'main main aside' 'footer footer footer ';
grid-gap: 0px;
padding: 0px;<!-- This is my header-->
<header>
<h1></h1>
</header>
<div id="big-container">
<nav>
<a href="My-house-(6)/index.html" id="nav1"> my house</a>
<a href="calendar/calendar.html" id="nav2"> my calendar</a>
<a href="index2.0.html" id="nav3">main</a>
</nav>
<main>
Main content here
</main>
<aside>
Aside section
</aside>
<footer>
Footer content
</footer>
</div>