ulタグの枠の左側の余白を統一したい

前提・実現したいこと

ulタグの枠の左側の余白を統一したい。
liタグの行間を揃えたい。

発生している問題・エラーメッセージ

下図のように「メリット」下の枠と「デメリット」下の枠の左側が揃っていません。
また、箇条書きの行間も「メリット」と「デメリット」で違います。
ulのスタイルシートは「メリット」も「デメリット」も同じ内容を使用しているので原因が分かりません。
spanタグが影響しているのかと思ってpタグに変えてみたりしたのですが、変化はありませんでした。
どなたが修正方法が分かれば、ご教示お願いします。

該当のソースコード

<head>
<style type="text/css">
span.good {
  color: green;
  font-weight: bold;
  font-size: large;
}

span.bad {
  color: red;
  font-weight: bold;
  font-size: large;
}

ul {
  margin: auto;
  border: 5px double #333333;
  border-radius: 15px;
  display:inline-block;
  padding: 20px;
}
</style>

<div>
　<p>◯◯</p>
　<span class="good">メリット</span><br>
  <ul>
   <li>◯◯</li>
   <li>◯◯</li>
  </ul><br><br>
　<span class="bad">デメリット</span><br>
　<ul>
　 <li>◯◯</li>
　 <li>◯◯</li>
　 <li>◯◯</li>
　 <li>◯◯</li>
　</ul><br>
　<p>◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯</p>
</div>