* {
      box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    div.container {
        border: solid 12px black;
    }
    
    section {
        border: solid 4px black;
        padding: 10px;
        /*The default gap/margin between elements is 10px, but you may need to change this at times*/
        /*Note that 'margin collapse' occurs with some positioning strategies but not others*/
        font-size: 36px;
        font-family: sans-serif;
    }
    
    .one {
        background: #A36;
        width: 200px;
        height: 200px;
        float: left;
        margin: 10px;
    }

    .two {
        background: #A58;
        height: 200px;
        width: auto;
        margin-left: 225px;
        margin-top: 10px;
        margin-right: 10px;

    }

    .three {
        background: #A7A;
        height: 200px;
        width: 48%;
        float: right;
        margin-left: 10px; 
        margin-top: 10px;
        margin-right: 10px; 
    }

    .four {
        background: #A9C;
        height: 200px;
        width: 48%;
        margin-left: 10px;
        margin-top: 10px;
        margin-right: 10px;
     
    }

    .five {
        background: #ABD;
        width: auto;
        height: 100px;
        clear: right;
        margin: 10px;
    }

    .arrow {
        margin-top: 60px;
    }

    .arrow p {
        display: inline;
        font-size: 20px;
        font-family: sans-serif;
        font-weight: bold;
        margin: 30px;
    }

    a {
        cursor: pointer;
    }