@charset "UTF-8";
.header{
background-color: #ff7f50;
}

.headermenu{
background-color: #ffffe0;
}

.left_sidebar{
background-color: #00ced1;
}

.contents{
background-color: #cd5c5c;
}

.right_sidebar{
background-color: #9acd32;
}

.footer{
background-color: #4682b4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
    clear: both;
}

.title h1 a{
color:#000000;
text-decoration: none;
}

.title h1{
margin: 0;
font-size: 30px;
}

.menu ul{
margin: 0;
padding: 0;
list-style: none;
}

.menu li a{
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none;
}

.menu li a:hover{
background-color: #eeeeee;
}

.menu ul:after{
content: “”;
display: block;
clear: both;
}

.menu li{
width: auto;
}

@media (min-width:768px) {

.container:after{
content: “”;
display: block;
clear: both;
}

.wrapper{
float: left;
width: 80%;
}

.wrapper:after{
content: “”;
display: block;
clear: both;
}

.left_sidebar{
float: left;
width: 25%;
}

.contents{
float: left;
width: 75%;
}

.right_sidebar{
float: left;
width: 20%;
}

.menu ul{
margin: 0;
padding: 0;
list-style: none;
}

.menu li a{
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none;
}

.menu li a:hover{
background-color: #eeeeee;
}

.menu ul:after{
content: “”;
display: block;
clear: both;
}

.menu li{
float: left;
width: auto;
}
}

Edit in JSFiddle
Result
HTML
CSS
JavaScript
img, canvas {
  border: 4px dashed rgb(221, 221, 221);
}

.container {
  width: 90%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(66, 66, 66, 0.7);
}

#output-image > img {
  margin: 5px;
}