Vertical Lines between Sections

Site URL: https://www.betterpupsdogtraining.com/obedience

Hi Squarespace Community! 

I need a vertical line between sections.  I added, this CSS but it was overlapping on the mobile view.  Thank you for your help.

PAGE CODE:

<div class="vl"></div>

CSS CODE:

// this is a vertical divider-line
.vl {
border-left: 2px solid #000000; // defines the width, style and color of the line (change the hex code [#303030] to match your site).
  height: 850px; // defines the length of the line.
  position: absolute;
  left: 50%; //move the line to the middle (50% of the page width)
  margin-left: -1px; //half the width of border witdth to ensure the line is precicely centered on the page.
  top: 0;
}

Do you have a visual or a mock-up of what you're aiming to achieve?

Just a vertical line between these 2 sections:  Basic and Advanced Obedience

The url doesn't exist. Can you check it again?

https://www.betterpupsdogtraining.com/obedience