Андрей Б.

Последнее правило не самое главное, есть еще понятие специфичности селекторов, почитайте.
border none сработает только если специфичность одинаковая.

Если убрать nth-child(1) - то border:none заработает.

Обманываете.

Чтобы выровнять иконку и текст, оберните текст в span например и ему тоже укажите inline-block и middle или как вам нужно.
Чтобы в кнопках не было соседних иконок, делайте через :before

Ставите emmet
После выделения жмете ctrl + shift + g

Так этот метод по умолчанию плавно работает, при открытии и закрытии. Или вопрос в другом?
Как скрывать при клике за пределами элемента

upd: пример

1. Там применяется float к классу .price. Вот родитель у вас и схлопнулся.
Решение: укажите родителю clearfix или overflow: hidden;

2. Читаем про last-child внимательней.

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

А у вас идет последним элемент с id deep_right. Чтобы применился .product он должен быть последним элементом в своем родителе.

P.S. В .box1 у вас прописан display: inline-block; в то время как в .price указан float: left;
float делает элемент блочным, поэтому inline-block не работает и соответственно он тут лишний.

Firebug все верно показывает, [div] растягивается на всю ширину контейнера, у вас там похоже заголовок и [p] у которых есть margin(внешний отступ) по умолчанию, он не растягивает div.wrapper по высоте.
wrapper в данном случае имеет те же размеры что и дочерний блок, задайте ему например overflow: hidden; и размеры изменятся.