Quebra de linha tabela

Como eu faço para a tabela fique alinhada com o conteiner onde está? No momento, o tamanho das linhas são do tamanho da maior frase nas células.

<table class="habilidades">
            <thead>
                <tr>
                    <th>Habilidade</th>
                    <th>Nível</th>
                    <th>Experiências</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <th>HTML5</th>
                  <td>Proficiente</td>
                  <td>Uso em todos os sites que desenvolvo</td>
              </tr>
              <tr>
                  <th>CSS3</th>
                  <td>Proficiente</td>
                  <td>Uso em todos os sites que desenvolvo</td>
              </tr>
              <tr>
                  <th>JavaScript</th>
                  <td>Proficiente</td>
                  <td nowrap="true">Uso em quase todos os sites que desenvolvo, aplicando-o de forma não-obstrutiva </td>
              </tr>
              <tr>
                  <th>Design</th>
                  <td>Proficiente</td>
                  <td>Formado em web design pela Universidade de Jacarezinho</td>
              </tr>
              <tr>
                  <th>Git</th>
                  <td colspan="2" rowspan="3">Estudando</td>
              </tr>
              <tr>
                  <th>Angular</th>
              </tr>
              <tr>
                  <th>Java</th>
              </tr>
          </tbody>
      </table>

.habilidades th {
    font-weight: bold;
    background-color: #851944;
    color: white;
}

.habilidades thead th {
    background-color: #3C1D3D;
}

.habilidades td {
    background-color: #eee;
}

.habilidades th,
.habilidades td {
    padding: 1em;
}

.habilidades {
    border-collapse: separate;
    border-spacing: .25em;
    margin: 1em 0;

}

.habilidades [colspan] {
    text-align: center;
    font-style: italic;
}

.habilidades [rowspan] {
    vertical-align: middle;
}