Ксения

Блоки инлайновые? если да, то это может быть символ переноса или пробела. Тут варианты борьбы с этим.

вариантов много, самые простые - на javascript.
на css можно попробовать вот так: https://jsfiddle.net/fcdk5dyn/
важно, чтобы чекбокс и скрытый див были внутри одного родителя.
Дальше вариантов оформления много, и не обязательно использовать display: none для скрытия. Можно сделать прозрачным, уменьшать/увеличивать высоту, добавить transitions и анимацию.

ну если так уж критично, подключите свои стили после бутстраповских

Делай параллельно: и учись и качни более-менее подходящий и современный html5 - макет. Минимума знаний тебе хватит на то, чтобы рыбатекст заменить на свой... ну или найди фрилансера, если совсем прижало. Но ты должен понимать, что за месяц-полтора такого "учения" так и так лажа выйдет, так что учись изо всех сил!

Присвой этому P класс с модификатором, или обратись через :nth-child(n)

todoist.com

домик положи в фон и два блока, float:left и float:right, с отступами от краев
а для самого контейнера задай максимальную и минимальную ширину

https://jsfiddle.net/TGNC/7fjvznfd/1/

Можно (и удобней) div-у прописать background-image, а внутрь - текст, а можно - дивы в разных слоях с z-index, но это имеет смысл, если кроме текста у Вас еще элементы есть: фон, градиент, другая картинка и тп.
зы: psd-шаблон дербанить проще в Adobe assets
зызы: на скриншоте у Вас не вижу ни одного элемента, где нужна картинка - можно все это сделать на чистом css, так гораздо быстрее все будет крутиться. Загуглите

+1 к предыдущему оратору )
смотрите в отладчике сайты крупных/уважаемых ресурсов, изучайте, как устроен их код, namespace, как применяется семантика. А по поводу psd - вот вам немного для начала:
раз
два
три
четыре

фон менять можно не обязательно JS. Можете отслеживать псевдоэлементом :hover например так