Помогите разобраться с кодом

Хочу сделать сайт по типу блога, но двигая одно, налезаю на другое.
Если делаю рамку для одного контейнера, он вылезает в другом и т.д.

Хочется что-то типа этого:

хотел выделить кнопку ПОДРОБНЕЕ, получил в довесок поля №3. Вообще-то это один текст - почему он оказался в трех контейнерах?

ВОПРОС: Как переписать код, чтобы все контейнеры были независимы. Для того, чтобы можно было работать с каждым контейнером отдельною.

Часть своего кода выкладываю. Загвоздка где-то здесь, как мне кажется, но не могу понять как все разделить.

/* begin Page */
/* v3.1.0.41778 */

#art-main, table
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 13px;
text-align: justify;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
line-height: 175%;
padding:5px;
}

.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
....

Весь код здесь:

Acka, думаю дело в следующих строках:Т.е. каждый абзац в классе .art-postcontent выделился в рамочку...
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.

VARion пишет: Acka, думаю дело в следующих строках:

.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}

Т.е. каждый абзац в классе .art-postcontent выделился в рамочку...
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.

Извиняюсь за отсутствие, уезжал на пару дней.

Рамку и отступ писал сам, чтобы разобраться, что и за что отвечает.
Мне непонятно, как мне прописать к отдельному контейнеру свое задание, или как, например, вынести за рамки общего списка (например, заголовок h1) и прописать свой стиль???

Кусок кода,как пример...
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}

Здесь нужно разбираться, как CSS вообще работает: селекторы, идентификаторы, наследование...
Удобно и понятно изложено здесь: Самоучитель CSS

По вашему примеру кода. Так писать не стоит, это избыточно и не наглядно. Можно так делать:

[quote="VARion"[/quote]

Спасибо. Буду пробовать.
Спасибо за ссылку. Ознакомлюсь, отпишусь.

VARion пишет: Здесь нужно разбираться, как CSS вообще работает

Угу, в артистировском шаблоне разве разберёшься? Там прога таких каскадов настраивает, что начинаешь отладку - потом плюёшься и перевёрстываешь ручками...

А вообще - Firebug рулит!