Removing gap in <li> contents

I'm having trouble on the content of <li> having a gap between.

.main {
  display: flex;
}

.posts-container {
  padding: 5px;
    display: flex;
    border: 1px solid;
    border-radius: 5px;
    justify-content: center;
    background-color: #999;
    height: 100%;
}

.posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box {
    width: auto;
    margin-left: 10px;
    margin-top: 25px;
    height: 400px;
}

.posts-list li {
    margin: 0 0 3px 0.3%;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
      border: 1px solid;
      border-radius: 5%;
}

.posts-list h2 {
    margin-top: 0;
    font-size: 24px;
    text-align: center;
}

.posts-list p {
    font-size: 11px;
    margin: 0;
    padding: 0 20px 5px 5px;
}

.days-left {
    font-size: 14px;
    color: #3e3e3e;
    margin: 3px 0;
}

.box li div {
    justify-content: center;
}

.box .body {
    border-top: 1px solid;
}

.box h2 {
    border-bottom: 1px solid;
}

<!DOCTYPE html>
<html>
<body>
<main class="posts-container">
<ul class="posts-list">
  <div class="box">
    <li>
      <h2>Title</h2>
       <p class="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </p>
       <p class="days-left">test</p>
    </li>
  </div>
</ul>
</main>
</body>
</html>

Here is the jsfiddle link. JSFiddle

I tried using margin but didn't work, I also tried separating Title and Body with div but still didn't work.

Any advice, or idea that I can try or just help in general would be greatly appreciated.

Solution

Just set margin:0 for h2 element and li must be direct child of ul

.main {
  display: flex;
}

.posts-container {
  padding: 5px;
    display: flex;
    border: 1px solid;
    border-radius: 5px;
    justify-content: center;
    background-color: #999;
    height: 100%;
}

.posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box {
    width: auto;
    margin-left: 10px;
    margin-top: 25px;
    height: 400px;
}

.posts-list li {
    margin: 0 0 3px 0.3%;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
      border: 1px solid;
      border-radius: 5%;
}

.posts-list h2 {
    margin: 0;
    font-size: 24px;
    text-align: center;
}

.posts-list p {
    font-size: 11px;
    margin: 0;
    padding: 0 20px 5px 5px;
}

.days-left {
    font-size: 14px;
    color: #3e3e3e;
    margin: 3px 0;
}

.box li div {
    justify-content: center;
}

.box .body {
    border-top: 1px solid;
}

.box h2 {
    border-bottom: 1px solid;
}

<!DOCTYPE html>
<html>
<body>
<main class="posts-container">
<ul class="posts-list">
  
    <li>
      <h2>Title</h2>
       <p class="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </p>
       <p class="days-left">test</p>
    </li>
  
</ul>
</main>
</body>
</html>