<div>
  <header>
    This is header.
  </header>
  <div class="main">
    <h1>CyuBlog</h1>
    <img src="https://via.placeholder.com/256x256.png?text=Logo"/>
    <div class="center">
      <p>This is a blog about</p>
      <ul>
        <li>Javascript</li>
        <li>CSS</li>
        <li>HTML</li>
      </ul>
    </div>
    <div class="flex-center">
      <div>
        <p>This is a flex-center example</p>
        <ul>
          <li>Javascript</li>
          <li>CSS</li>
          <li>HTML</li>
        </ul>
      </div>
    </div>
    <p>This sample show an example web page for demostration. CSS stands for Cascading Style Sheets. It is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
  </div>
  <footer>
    This is footer.
  </footer>
</div>
.main {
  margin: 0 auto;
  padding: 18px;
  border: 1px solid grey
}

.center {
  width: 50%;
  background-color: pink;
  margin: 0 auto;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  border: 3px solid green; 
}

header {
  padding: 10px;
  color: white;
  background-color: blue;
}

footer {
  padding: 10px;
  text-align: right;
  color: white;
  background-color: indigo;
}

h1  {
/*   margin: 0 auto; */
  text-align: center;
}

img {
  margin: 0 auto;
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.