Text within div squished up

Question

I managed to get some help to align the divs properly, I'm trying to stack 3 on top of each other 3 times stacking up to 9 divs of 3 above each other with information... But the text is getting squished up.

I'm trying to keep the text from being kept within the same width so it won't be squished up and it looks neat.

http://jsfiddle.net/Sk9HJ/ - HTML+CSS

<div class="contain-info">
<table>
<tr>
<td>
<div class="info1">
<h1>WHAT IS IT?</h1>
<p>The internet is a Network of computers that are all connecting to create the global World Wide Web. All domains within the World Wide Web follow strict standardized communication protocols.</p>
</div>
</td>
<td>
<div class="info2">
<h1>USES</h1>
<p>Internet makes many activities easy and possible, some of these include but not limited to transferring files, Research, e-mail, chatting, social networks. A lot of business is also done over the internet although it is more secure then general browsing, this can include banking, online shopping, and money transfer.</p>
</div>
</td>
<td>
<div class="info3">
<h1>CONNECTING</h1>
<p>Connecting to the internet Requires:
A Reasonably up-to-date computer
A Telephone line, Spare power point
Ethernet cable *If required*
There are two main ways to connect to the internet at home. The first and most popular one is broad band or WiFi. As said in the name Wireless is a no wired way of connecting to the internet. Second we have though Ethernet cable, an Ethernet cable is a cable that connects devices to each other to provide internet from routers.</p>
</div>
</td>
</tr>
</table>

---

.contain-info {
 display: inline-block;
 width:100%;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }
table {
    margin: 0px auto;

}
td {
    height: auto;

}
.info1 {
 font-family: "Bebas Neue";
 text-align: center;
  margin-left: 100px;
  margin-right: 100px;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 margin-left: 100px;
 margin-right: 100px;

 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
  margin-left: 100px;
  margin-right: 100px;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

Answer 1

See this Fiddle

Add width: 100%;

table{
    margin: 0px auto;
    width: 100%;
}

You may add percentage on td such as width: 33.33%;. Also you may use padding instead of margin left and right: padding: 5px;

td {
    height: auto;
    width: 33.33%;
    padding: 5px;
}