Если Вы хотите убрать эти линии, попробуйте у элементов .modal-header и .modal-footer отключить border.

.modal-header, .modal-footer {
    border: none;
}

Если Вы хотите привести эти линии к нормальному виду, то элементу с классом modal-body добавьте класс clearfix(как было упомянуто выше), либо добавьте свойство overflow: hidden

.modal-body {
    overflow: hidden;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

Можно. Чем больше и насыщеннее будет Ваш проект, тем сложнее его будет адаптировать под Wordpress.
Если есть возможность, лучше сразу разрабатывайте сайт на wordpress, сэкономите огромное кол-во времени и сил.

// Универсальная функция для проверки расположения объекта в "области видимости"
$.fn.onViewPort = function(){
   var viewport = {};
   viewport.top = $(window).scrollTop();
   viewport.bottom = viewport.top + $(window).height();
   var bounds = {};
   bounds.top = this.offset().top;
   bounds.bottom = bounds.top + this.outerHeight();
   return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
};

// Используем после загрузки DOM
$(function() {
   // Инициализируем объект, который хотим отслеживать
   var $vTarget = $('.view-target');
  // Проверяем при скролле страницы
   $(window).scroll(function() {
      if($vTarget.onViewPort()) {
         console.log('Объект в области видимости');
      }
   });
});