* {
  box-sizing: border-box;
}

body {
  background-color: #fbf8e9;
  color: #555;
  font-size: 1.1em;
  padding: 1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  /* clear the floats */

  overflow: hidden;
  /* give background just for sake of visualizing the collapse if you remove the float clearing rule */

  background-color: pink;
  /* also for sake of visualization */

  padding: 10px;
}

section {
  /* float left */

  float: left;
  /* give it width */

  width: 60%;
  /* general styles */

  background-color: white;
  border: 2px solid grey;
  text-align: center;
  height: 350px;
}

aside {
  /* float right */

  float: right;
  /* give it width */

  width: 38%;
  /* general styles */

  height: 350px;
  text-align: center;
  border: 2px solid grey;
  background-color: white;
}

/* some general styles for the elements */
.note {
  margin: 10px auto;
  background-color: white;
  padding: 10px;
  width: 500px;
}

header {
  border: 2px solid grey;
  text-align: center;
  height: 70px;
  line-height: 70px;
  margin-bottom: 10px;
  background-color: white;
}

footer {
  border: 2px solid grey;
  background-color: white;
  text-align: center;
  height: 70px;
  line-height: 70px;
  margin-top: 10px;
}