.container {
  padding: 0;
  margin: 20px !important;

}
.tbox {
  display: inline-block;
  border: 3px solid green;
  border-radius: 3px;
  padding: 2px;
  margin: 0px;
  width: 100%;
  height: 150px;
  text-align: center;
  background-color: #c2f0c2;
}

.code {
  display: inline-flex;
  z-index: 1;
  float: left;
  flex-direction:column;
  width: 100%;
  height: 400px;
  border:3px solid blue;
}


.code textarea {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 15px;
  background-color:#EBF5FB;
  padding: 15px;
 
}


.preview {
  display: inline-flex;
  background: #ffffff;
  
  width: 100%;
  height: 400px;

}

.preview iframe {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 3px solid black;
}

h1{
  text-align: center;
  color: #0A2E6B;
  font-family: serif;
}
h3 {
  font-family: serif;
  margin-left: 40px;
}

.ext_code{
  display: inline-flex;
  z-index: 1;
  float: left;
  flex-direction:column;
  width: 100%;
  height: 600px;
  border:2px solid blue;

}

.ext_code textarea {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 15px;
  background-color:#EBF5FB;
  padding: 15px;
 
}

.ext_preview {
  display: inline-flex;
  
  width: 100%;
  height: 600px;

}

.ext_preview iframe {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 2px solid black;
}