* {
          box-sizing: border-box;
        }
        
        .left {
          background-color: #2196F3;
          padding: 20px;
          float: left;
          width: 20%; /* The width is 20%, by default */
        }
        
        .main {
          background-color: #f1f1f1;
          padding: 20px;
          float: left;
          width: 60%; /* The width is 60%, by default */
        }
        
        .right {
          background-color: #04AA6D;
          padding: 20px;
          float: left;
          width: 20%; /* The width is 20%, by default */
        }
        
        /* Use a media query to add a break point at 800px: */
        @media screen and (max-width: 800px) {
        .main{
            width: 80%; /* The width is 100%, when the viewport is 800px or smaller */
          }
          .right {
            width: 20%;
          }
        .left { width: 0%; padding: 0px}
        }