.header {

   background: #fff; /* green background */
   width:100%;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden; /* Hide overflow */
  color: #bbb; /* Dark background color */
  max-width:100%;
  height:auto;
}




/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  padding: 20px; /* Some padding */  
  color: #b0141f; /* White text color */
  font-size: 20px;
}

/* Main column */
.main {
  font-size: 15px;
  padding: 20px;
  max-width:100%;
  height:auto;
  text-align: left;
  vertical-align :top;
}
.main2 {
  font-size: 12px;
  padding-left: 20px;
  max-width:100%;
  height:auto;
  text-align: left;
  vertical-align :top;
}
.footer {
  padding: 10px; /* Some padding */
  text-align: left; /* Center text*/
  background: #b0141f; /* Grey background */
  color: #fff;
}
.date {
  max-width:100%;
  color: #b0141f;
  padding-bottom:5px;
  height:auto;
  text-align: center;
  border-bottom: 2px  solid #b0141f;
}

.left {

  float: left;
  max-width: 450px; /* The width is 20%, by default */
}

.main {
  float: inherit;
  max-width: 450px; /* The width is 60%, by default */
}

.right {
  float: right;
  max-width: 450px; /* The width is 20%, by default */
}
.main_head {
  float: inherit;
  max-width: 100%; /* The width is 60%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}