Basic Css Layout

<!DOCTYPE html>
<html lang=en>
<head>
<title>Rough Css Layout</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>


.x {
  box-sizing: border-box;
  display:block;
  width:800px;
  margin:-4px auto;
  padding:0 0 0 6px;
}

span {
  font-size:30px;
  width:390px;
  background-color:red;
  color:white;
  height:200px;
  display:inline-block;
  transform:translate(4px,2px);
  margin:-1px;
  overflow:hidden;
  text-align:center;
  padding:10px;
  box-sizing: border-box;
}

img {
  width:100%;
  height:100%;
}

a {
  text-decoration:none;
  color:white;
  font-family:segoe print;
  font-weight:900;
}

iframe {
  width:100%;
  height:100%;
}


</style>
</head>
<body>

<div class='x'>
   <span><h1 style='font-size:40px;font-family:courier;'>I have no car. Instead i ride a donkey.</h1> </span>
  <span><img src='https://images.pexels.com/photos/2569232/pexels-photo-2569232.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/></span>
   <span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/k32voqQhODc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </span>
  <span>
    <a href='https://zsndndbaxq8vhlfcswjbiq-on.drv.tw/Audio Playlist Basics 1/Audio Playlist Basics 1.html'>Link<br/>Audio Playlist<br/> Basics</a>
  </span>
   <span style='font-size:30px;margin:auto;display:block;margin-top:-1px;overflow-y:scroll;font-family:courier;font-weight:900;padding:10px 20px;    '>To be centered i have needed some additional <a href='https://www.w3schools.com/html/html_styles.asp' target='_self'>INLINE</a> style. Why? Because i am not inside a <a href='https://www.w3schools.com/css/css3_flexbox.asp' target='_self'>FLEXBOX</a>. Otherwise it wouldn't be necessary such drastic measures.</span>
  </div>

</body>
</html>