Blog CSS Container Issues

I tried to create a very simple blog.

Here is the code used:

<!DOCTYPE HTML>
<html>
<head>
<title>Henry's Blog</title>
<style>
body {
  text-align: center;
}
.container {
  width: 80%;
  display: inline-block;
}
.post {
  text-align: left;
  border: 2px solid #000000;
}
</style>
</head>
<body>
<h1>Welcome to Henry's Blog!</h1>
<div class="container">
  <div class="post" id="2">
    <h2>2nd Post</h2>
    <p>it works</p>
  </div>
  <div class="post" id="1">
    <h2>First Post</h2>
    <p>Welcome to my blog!</p>
  </div>
</div>
</body>
</html>

Here are the issues:

  • Empty space above and below text, no margin between text and border, and no spacing between post containers...

I've tried to fix these for a while; the issues are very simple, but I still can't seem to fix them.

And here's an image describing the issues. Here are the issues.

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Start typing and press Enter to search