style.css

 body {
        background: #DDD6B2;
        counter-reset:section;
        
      }
      .container {
        background: #fff;
        padding: 30px 50px 50px;
        margin: 50px auto;
        width: 800px;
        font-family: "Titillium Web";
        border-radius: 4px;
      }
      p {
         
      }
      h1 {
         font-family: "Armata", cursive;  
         text-align: center;
         counter-reset:subsection;
         counter-increment:section;
      }
      img {
        max-width:100%;border:1px solid rgb(70,70,70);margin:20px 0;display:block;  
      }
      
      .logo{width:300px;border-width:0; }
      .imagebox{text-align:center;}
      .imagebox img{display:inline}
      li{margin:15px 0;}
      ol > li{list-style:none;}
      ol> li{text-indent:-28px}
      ol >li>ol>li{text-indent:-39px}
      ul >li{text-indent:0;}
      .container > ol > li:before{counter-increment:subsection;counter-reset:subsubsection;
content:counter(section) "." counter(subsection) " "}
.container > ol > li > ol >li:before{counter-increment:subsubsection;
content:counter(section) "." counter(subsection)"."counter(subsubsection) " "}
nav li{display: inline-block; margin:0px}
    nav li a{padding:6px 10px 10px ;display:inline-block;text-decoration:none;color:black;}
    nav ul{margin:0 auto;
          padding:0 6px;
          height:35px;
          background-color:#DDD6B2;
          border-radius:2px;
          display:table;
          
    }
    nav li:hover{background-color:rgba(255,255,255,0.5)}
    @media (max-width:800px) { 
      .container{width: 500px;
      }
      img:hover{position:absolute ;left:0;width:100%;border-width:1px 0;}
      
     }