Div не правильно выравнивается по горизонтали

Question

Вот этот сайт под вопросом: http://jayduff.co.uk/

Ранее у меня были изображения / ссылки слева и заголовок слева, я решил изменить его, чтобы сделать его более стандартизированным, но два верхних элемента, содержащих заголовок и ссылки, похоже, не выровнены должным образом больше?

Вот CSS для моей ссылки div и моего заголовка div (вы также можете просмотреть источник моей ссылки выше)

    #title { 
      float:left;
      font-family: 'BebasNeueRegular', sans-serif;
      font-color: #6D929B;
      -webkit-font-smoothing: antialiased; 
      text-rendering: optimizeLegibility;  
    }

    #links { 
      margin-top:40px;
    }

У меня внизу есть div ... который содержит мой основной текст

   #mainText {
     width: 450px;
     word-wrap: break-word; 
     margin-left:45px;
   }

Я почти уверен, что что-то упустил из приведенных выше стилей div, и это приводит к тому, что верхние два div не выровнены должным образом с третьим div ниже него?

Вот пример того, как это должно быть

title                links
**************************** 
* JOSHUA DUFFY *  O O O O  *                                                         
****************************
* mainbody                 *
*                          *
*                          *
****************************

Надеюсь, что имеет смысл, где я иду не так? Я уверен, что это не размещение моих дивов только атрибуты выше? Заранее спасибо

Answer 1

Из того, что я вижу, вам не хватает float:left; в ваших ссылках в стиле div ....

Answer 2

попробуйте

  #mainText {
        clear: both;
        margin-left: 45px;
        width: 450px;
        word-wrap: break-word;
    }

#links {
    float: left;
    margin-top: 40px;
}

#title {
    float: left;
    font-family: 'BebasNeueRegular',sans-serif;
    text-rendering: optimizelegibility;
}