Can anyone help me with fixing a responsive HTML Accordion?

Question

I'm a junior web developer and I'm working on this site but I have encountered an issue which I can not seem to fix on my own. I have made an accordion but when I scale the site down, the header text seems to overlap the dropdown icon. Here I have attached two screenshots of how the text overlaps Screenshot 1 , Screenshot 2.

I have also attached screenshots of the HTML and CSS: HTML CSS.

.accordion{
     width: 90%;
     max-width: 1000px;
     margin: 2rem auto;

 }
 .accordion-item{
     background-color: white;
     color: black;
     margin: 1rem 0;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
 }
 .accordion-item-header{
     padding: 0.5rem;
     min-height: 3.5rem;
     line-height: 1.25rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
     cursor: pointer;
 }
 .accordion-item-header::after{
     content: "\002B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "\2212";
}
.accordion-item-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
   
   
}
.accordion-item-body-content{
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 2px solid;
    border-image: linear-gradient(to right,  #ffea31, #20944b)1;
   }

 <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    Echo Beach is where you spent the best vacations of your childhood: golden sandy beaches,
                    awesome arcades, zen tranquility and friendly faces. No one is quite sure why people stopped
                    coming but soon Echo Beach was a shell of its past days. You have answered the call to return to
                    Echo Beach once again and return its former glory with your building skills.
                </div>
            </div>

        </div>

        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S THE GOAL OF ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    To harvest wood, mine ore and learn skills so you can rebuild the town of Echo Beach so its
                    inhabitants return. Make friends, explore the depths and uncover the lost secret of Dr. Terra
                </div>
            </div>

Answer 1

Add a padding-right to accordion-item-header class. In the below code ive added 2.5rem as padding-right.

.accordion{
     width: 90%;
     max-width: 1000px;
     margin: 2rem auto;

 }
 .accordion-item{
     background-color: white;
     color: black;
     margin: 1rem 0;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
 }
 .accordion-item-header{
     padding: 0.5rem 2.5rem 0.5rem 0.5rem;
     min-height: 3.5rem;
     line-height: 1.25rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
     cursor: pointer;
 }
 .accordion-item-header::after{
     content: "\002B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "\2212";
}
.accordion-item-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
   
   
}
.accordion-item-body-content{
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 2px solid;
    border-image: linear-gradient(to right,  #ffea31, #20944b)1;
   }

<div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    Echo Beach is where you spent the best vacations of your childhood: golden sandy beaches,
                    awesome arcades, zen tranquility and friendly faces. No one is quite sure why people stopped
                    coming but soon Echo Beach was a shell of its past days. You have answered the call to return to
                    Echo Beach once again and return its former glory with your building skills.
                </div>
            </div>

        </div>

        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S THE GOAL OF ECHO BEACH WHAT’S THE GOAL OF ECHO BEACH WHAT’S THE GOAL OF ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    To harvest wood, mine ore and learn skills so you can rebuild the town of Echo Beach so its
                    inhabitants return. Make friends, explore the depths and uncover the lost secret of Dr. Terra
                </div>
            </div>

        </div>