Не могу понять в чём причина с аккордеоном FAQ на CSS, JS (понял но помощь всё равно нужна). Непонятки c CSS

Всем доброго времени суток. Помогите кто чем может. В общем нашёл аккордеон вот тут https://dzen.ru/video/watch/64eb9e888350ed3fd15837ce исходник тут https://boosty.to/monster-tem/posts/9fefe69f-60c7-4b50-a949-8854e63e930e. Мне понравилось, что блоки можно сделать разноцветными, в общем всё нормально. В целом если я вставляю всё просто на страницу, все работает нормально. Но как только я вставляю код в код описания продукта в Вордпрессе в свой div со стилями то получается вот так как на картинке, т.е. снизу выглядывает блок с текстом который должен быть скрытым.

Пробовал менять значения в CSS но ничего путного не добился. Явно где то стили мешают друг другу, а где понять не могу.

<pre>accordion{
    max-width: 650px;
    width: 100%;
    background: #FFF;
    margin: auto;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
}
.accordion .accordion-content{
    margin: 8px 0;
    border-radius: 4px;
    background: #FFF7F0;
    border: 1px solid #FFD6B3;
    overflow: hidden;
}
.accordion-content:nth-child(2){
    background-color: #F0FAFF;
    border-color: #CCEEFF;
}
.accordion-content:nth-child(3){
    background-color: #FFF0F3;
    border-color: #FFCCD6;
}
.accordion-content:nth-child(4){
    background-color: #F0F0FF;
    border-color: #CCCCFF;
}
.accordion-content.open{
    padding-bottom: 5px;
}
.accordion-content header{
    display: flex;
    min-height: 40px;
    padding: 0 15px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s linear;
}
.accordion-content.open header{
    min-height: 30px;
}
.accordion-content header .title{
    font-size: 17px;
    font-weight: 500;
    color: #333;
}
.accordion-content header i{
    font-size: 17px;
    color: #333;
}
.accordion-content .description{
    height: 0;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    padding: 0 15px;
    transition: all 0.2s linear;
}</pre>

А это код CSS для div куда весь контент включён

 <pre>.nash_content {
  border-left: 1px dashed gray;
  border-right: 1px dashed gray;
  width: 70%;
  size: auto;   
  table-layout: fixed;
  margin: auto;
  padding-left: 2em;
  padding-right: 2em;   
    
}
.nash_content strong {
    font-family: Open Sans, Lexend Deca, Tahoma;
    font-size: 16px;
    font-weight: bold;
    color: #3f3f3f;
    text-align: left;
    margin-top: 5px;
    padding: 0px;
}
.nash_content p {
  font-family: PT Serif;
    font-size: 16px;
    color: #555555;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 10px;
  padding-bottom: 1px;
}
.nash_content h4 {
    font-family: Open Sans, Lexend Deca, Tahoma;
    font-size: 18px;
    font-weight: bold;
    color: #252525;
    text-align: left;
    margin-bottom: 5px;
    margin-top: 0px;
    padding: 0px;
}
</pre>

всё это размещается в вордпрессе. Но я даже в дримвивере (скрин с локальной паги) не могу добиться что бы было нормально, как на скрине внизу.

Помогите советом, из за какого стиля такое происходит. Пока писал обнаружил проблему в блоке:

<pre>
    /*.nash_content p {
  font-family: PT Serif;
    font-size: 16px;
    color: #555555;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 10px;
  padding-bottom: 1px;
}
*/
</pre>

Выключил и сразу стало нормально. Теперь быть понять почему стиль nash_content (это для параграфов текста внутри div наполнения описания для товара) влияет на конкретный класс p description

В общем от помощи не отказываюсь ;) Давно сайтами не занимался всё больше фотошопом.

С Уважением.