Hi, I created a Flexbox Navbar that has a position:fixed. The image below called prestige overlaps the Navbar to the right. The Image should be extended from left to right, at the bottom of the page. I’m using a grid on the image that Grid column 1 to Grid Column 7. Below is my html and css.
Here is a screen print illustration:
https://roberla.github.io/Foods/
Thanks very much!
<img class="cover" src="images/prestige.jpeg" alt="Delicious Food">
</div>
CSS
body {
margin: 0;
max-width: 100vw;
min-height: 100vh;
font-family: “Roboto”, san-serif;
font-weight: 300;
color: #444444;
background-color: #ac4c4c;
display: grid;
grid-template-columns: 5% 25% 25% 20% 20% 5%;
grid-template-rows: 8% 10% 15% 25% 25% 15% 20%;
}
.nav {
display: flex;
position: fixed;
top: 0px;
width: 100%;
padding: 0.1%;
background-image: linear-gradient(
30deg,
rgb(22, 95, 116),
#c47977,
#449797,
#1a46d4
);
z-index: 3;
}
.link {
display: flex;
align-items: flex-start;
justify-content: center;
height: 50px;
}
.nav a:link {
text-decoration: none;
color: #fcf6f6;
margin-left: 1em;
margin-right: 1em;
}
a:visited {
color: #d8c1c1;
}
a:hover {
color: #eaf2f8;
}
h1 {
color: #a2d9ce;
grid-column: 2 / 6;
grid-row: 2 / 3;
font-weight: 300;
}
.cover {
grid-column: 1 / 7;
grid-row: 3 / 5;
background-color: rgb(255, 255, 255, 0.9);
}
