[CSS] Problema com posicionamento

Esse é o código HTML:

<div id="body">
<a href="">Biologia 1</a>
<a href="">Biologia 2</a>
<a href="">Filosofia</a>
<a href="">Física 1</a>
<a href="">Física 2</a>
<a href="">Geografia</a>
<a href="">História</a>
<a href="">História da Arte</a>
<a href="">Inglês</a>
<a href="">Literatura</a>
<a href="">Matemática 1</a>
<a href="">Matemática 2</a>
<a href="">Português</a>
<a href="">Química 1</a>
<a href="">Química 2</a>
<a href="">Sociologia</a>
</div>

Esse é o código CSS:

#body {
 position: relative;
 top: 125px;
 padding: 30px;
 text-align: center;

}

#body a {

 text-decoration: none;
 display: inline-block;
 text-align: center;
 width: 140px;
 font-size: 20px;
 padding: 10px;
 border-radius: 2px;
 color: white;
	background: #34495e;
 font-weight: bold;
 box-shadow: 0px 1px 4px #888888;
 transition: 0.2s ease-out;
}

#body a:hover {

	background: #2c3e50;
}

Este é o resultado (width da tela 1200px)

/applications/core/interface/imageproxy/imageproxy.php?img=http://s7.postimg.org/dar42x49n/image.png&key=657d2bbc2277a04770b36f22df368d4bd17801a3d9957a030574292e8a9310f1" alt="image.png" />

Este é o resultado para width menor que 430px:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s7.postimg.org/hl5ryi9cr/image.png&key=3543f181c9b479e50e3bed1da495625484553fa0cf7de59c89c4750ed9be6caf" alt="image.png" />

O problema é que, na segunda foto, visivelmente, Química 2 e Sociologia estão desalinhados.
Quando, no CSS, em #body, retirei o "text-align:center;", tudo ficou alinhado certinho, mas preciso desse alinhamento para que o site continue responsivo (o site está sendo feito alinhado ao centro).

Como resolvo isso SEM retirar o text-align: center?