cssでPHPで出力した文字に枠を付けたい

前提・実現したいこと

PHPで出力した文字に、cssで枠を作りたい

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

出力した文字全体に枠が作られてしまう

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ant</title>
    <link rel="stylesheet" href="ant.css">
  </head>
  <body>
    <div class="header">
      <h1>ant</h1>
    </div>

    <div class="main">
      <table border="1"align="center">
  <tr>
    <th><form action="ant.php" method="get">
        <li class="comment">
        <input type="text" name="comment" class="comments">
        </li>
      </th>
  </tr>
  <tr>
    <td><li class="name">
        <input type="text" name="choice" class="choice">
        
      </td>
  </tr>
  <tr>
    <td>
       <input type="submit" name="button" value="書き込む" class="button">
       </li>
    </td>
  </tr>
</table>
</form>
      <?php
$comment = $_GET['comment'];
$choice = $_GET['choice'];
// ファイルポインタをオープン
$handle = fopen("test.txt", "a");
// ファイルへ書き込み
fwrite($handle, $comment."\n");
fwrite($handle, $choice."\n");

// ファイルポインタをクローズ
fclose($handle);
// ファイルポインタをオープン
$handle = fopen("test.txt", "r");
?>
<span>
<?php
// ファイル内容を出力
while ($line = fgets($handle)) {
  echo $line. '<br>';
}
?>
</span>
<?Php
// ファイルポインタをクローズ
fclose($handle);
?>
    </div>
  </body>
</html>

ant.css

body {
  font-family: "Avenir Next";
}


.header {
  background-color: #F4A460;
  color: #ffffff;
  height: 90px;
  text-align:center;
}

.header-logo {
  float: left;
  font-size: 36px;
 padding:20px 40px;

}

.main {
  background-color: #white;
  height: 600px;
  text-align:center;
}

.footer {
  background-color: #F4A460;
  height: 270px;
}

li {
  list-style: none;
}
table th,table td {
  padding: 20px;
  background: #fff5e5;
}

table {
  border-collapse: collapse;
  margin-top: 20px;
  width:1300px;
}

.choice,.comments  {
  text-align:center;
  width: 1000px;
height: 50px;
  border-radius:20px;
  box-shadow: none;
  padding: 2px 8px;
  border-color:black;
}

.button　{
  margin-right:20px;
  background-color: green;
}
span {
  border: 2px solid #000000;
	margin: 10px;
}