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: #033649; 

	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: 1200px;

    }