I am trying to put a background behind the whole css grid I have you can see the tomato color in the body, but I want that background color to be fully around the main tag. I tried a bunch different ways to wrap it, but something I have is conflicting.
One other thing is I can't get the gird to also start under the nav bar and I want the nav bar to stretch across the top and not overlapping when the page first loads. I am not sure if the correct way would be to just put a margin. I want to think there is some type of other way to do this.
Here is a jsfiddle
body {
background: tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* main */
main{
width: 85%;
height: 80px;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
to show what is happening so if anyone know hows to fix it please let me know.
