.container{
    display: grid;
    grid-template-columns:1fr;
grid-template-rows:50px 1fr auto auto 50px;
    grid-template-areas:
    "header"
    "main"
    "lnav"
    "sidebar"
    "footer";
    gap:10px;
max-width:1000px;
min-height:100vh;
margin: 0 auto;
}

/*for PC */
@media screen and (min-width: 768px),print{
.container {
grid-template-columns:24% 1fr 24%;
grid-template-rows:100px 1fr 100px;
grid-template-areas:
"header header header"
"lnav main sidebar "
"footer footer footer";
}
}
body{width: 950px;
    font-size: 16px;}
.header{
    background:#509422;
    grid-area:header;
}
.main{
    background:#e5f3db;
    grid-area:main;
}
.lnav{
    background:#aeda90;
    grid-area:lnav;
}
.sidebar{
    background:#aeda90;
    grid-area:sidebar;
}
.footer{
    background:#509422;
    grid-area:footer;
}
.info{
    max-width: 600px;
    margin: 5px auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
}
.cont{max-width:200px;
    flex:1;
    margin:0 5px;
    font-size: 1rem;
    }
section{margin-top:100px;}
ul{
    display: flex;
    flex-wrap: wrap;

justify-content: space-between;
}
li{
    padding: 10px;
    margin:5px 10px;
    background-color:#555;
    list-style: none;}

    .header1{
        background:#509422;
       height: 50px;
    }
    .main1{
        background:#e5f3db;
        order:2;
        width: 500px;
        display: block;
    }
    .lnav1{width: 180px;;
        background:#aeda90;
       order:1;
    }
    .sidebar1{
        background:#aeda90;
     order:3;
     width: 180px;
    }
    .footer1{
        background:#509422;
        
    }
    .center{margin-top:10px;
        display: flex;
    justify-content: space-between;}