cursedgrail

Быть может, проблема в разрешении? Наверное, вашему сайту просто не хватает места, чтобы нормально отобразиться.

Заголовок и текст вопроса совершенно никак не согласовываются.
А по скрину - это ужасно. Семантически, правильнее делать такую структуру:

<div class="column">
    <div class="title">Заголовок</div>
    <div class="text">Текст</div>
</div>

И стилизировать так:

/* любые div'ы по умолчанию имеют такую ширину, если свойства позиционирования или обтекания имеют дефолтные значения, но для проформы обозначим явно */
.column {width: auto; padding: 15px;}
.title, .text {width: auto;}

Это раз. Два: оформление ссылок под логотипом при наведении на них - громкий ужас. Нельзя так делать, это некрасиво. Зелёным цветом вообще нужно пользоваться очень осторожно, а уж тем более таким тёмным. А вот, заполнение цветом одновременно с подчёркиванием... Советую обходиться либо более тусклыми тонами синего или серого, либо простым подчёркиванием. Плюс, на заполнение цветом у вас transition срабатывает, а на подчёркивание - нет. Чтобы такого не было, нужно указывать границу сразу, но с прозрачным цветом (border-bottom: 2px solid transparent;), а уже в псевдоклассе :hover менять только цвет границы.
Плюс, ссылка 'Подробнее' никак не выделяется, если на неё навести мышь, а в отличие от блока с текстом. Надо сделать наоборот.

Загугли @media css.

Одному из блоков задаёшь

position: fixed;
width: 50%;
height: 100%

и меняешь ему позицию с помощью свойств left и right (почитай про них).
А другому блоку задаёшь отступ слева или справа в 50% и 50% ширину.
Но важно, чтобы все родительские теги имели 100% высоту, иначе ничего не выйдет.

Пока не раскачаешься, завязывай с фреймворками. Они запросто погубят в тебе умение строить архитектуру.