Как сверстать списки в квадратах?

Сергей delphinpro, вот код, но получилось это

<div class="container">
			<div class="square">
				<h2>1</h2>
				<ul id="list1">
					<li>Элемент 1</li>
					<li>Элемент 2</li>
					<li>Элемент 3</li>
				</ul>
			</div>
			<div class="arrows">
				<button onclick="moveItem('list1', 'list2')">→</button>
				<button onclick="moveItem('list2', 'list1')">←</button>
			</div>
			<div class="square">
				<h2>2</h2>
				<ul id="list2">
					<li>Элемент 4</li>
					<li>Элемент 5</li>
					<li>Элемент 6</li>
				</ul>
			</div>
		</div>

<style>
			.square {
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				padding: 10px;
			}
			.arrows {
				text-align: center;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				font-size: 24px;
			}
			ul {
				padding: 0;
			}
			li {
				list-style: none;
				cursor: pointer;
			}
		</style>

Как убрать отступы в документе?

Сергей delphinpro, да