body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
}

.container {
  max-width: 400px;
  max-height: 600px;
  margin: 30px;
}

#header {
  width: 100%;
  height: 50px;
  background-color: #71a8d9;
}

#img1 {
  width: 70%;
  height: 150px;
  background-color: #b7d984;
  float: left;
}

#text {
  width: 30%;
  height: 150px;
  background-color: #8fa66d;
  float: right;
}

#img2 {
  width: 100%;
  height: 100px;
  background-color: #f1bdf2;
}

#clear {
  clear: both;
}

h2 {
  margin: 0;
}

.container2 {
  max-width: 400px;
  max-height: 600px;
  background-color: red;
  display: flex;
  flex-direction: column;
  margin: 30px;
}

.imgText {
  display: flex;
}

#header2 {
  width: 100%;
  height: 50px;
  background-color: #71a8d9;
}

#img12 {
  height: 150px;
  background-color: #b7d984;
  width: 70%;
}

#text2 {
  width: 30%;
  height: 150px;
  background-color: #8fa66d;
}

#img22 {
  width: 100%;
  height: 100px;
  background-color: #f1bdf2;
}