html {
	box-sizing: border-box;
    border: none;
	font-family: arial, helvetica, sans-serif;
}
img {
	max-width: 100%;
}
*,*:before,*:after {
	box-sizing: inherit;
}
.container {
    height: auto;
	background-color: #2c4f4a;   
	width: 100%;  /* this will create a container 80% of the browser width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	padding-bottom: 1em;
}
.container > * {
	padding: 1em;
}
 .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
}
    
    .container > * {
        grid-column: 1 / span 12;
    }
    @media (min-width: 500px) {
        .chapters {
            grid-column: 1 / span 3;
            grid-row: 3;
        }
        .help {
            grid-column: 4 / span 3;
            grid-row: 4;
                        
                   }
        
        .main, .footer {
            grid-column: 4 / span 9;
        }
       
        nav ul {
            display: flex;
                  
        }
    }
    @media (min-width: 900px) {
        .chapters {
            grid-column: 1 / span 2;
        }
        .main {
            grid-column: 3 / span 8;
        }
        .help {
            grid-column: 11 / span 2;
            grid-row: 3;
        
        }
        .footer {
            grid-column: 1 / span 12;
        }
    }
    .container {
        max-width: 1400px;
    }