Timeline text not lining up with verticle bar

[EstellaSmith]

I'm trying to create a timeline within ArcGIS Hub Page.  I have a text card on the hub page and editing the html code for it. I was able to create a timeline, however, I can't seem to figure out why the content is shifted to the right and not lining up on the vertical timeline bar.  Plus, there are extra circles showing up on the hub page. 

Here is the html code:

<style>
* { box-sizing: border-box;}

body {background-color: #474e5d;
font-family: Helvetica, sans-serif;}

/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;}

/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #D0E4E2;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;}

/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;}

/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: #D0E4E2;
border: 4px solid #C98874;
top: 15px;
border-radius: 50%;
z-index: 1;}

/* Place the container to the left */
.left {
left: 0;}

/* Place the container to the right */
.right {
left: 50%;}

/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;}

/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;}

/* Fix the circle for containers on the right side */
.right::after {
left: -16px;}

/* The actual content */
.content {
padding: 20px 30px;
background-color: #D0E4E2;
color: rgb(43, 43, 43);
position: relative;
border-radius: 6px;}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px; }

/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px; }

/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent; }

/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px; }

/* Make all right containers behave like the left ones */
.right {
left: 0%; }
}
</style>

<div class="timeline">
<div class="container left">
<div class="content">
<h2>1957-1961</h2>
<p>Chief establishes soil survey program</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>1969</h2>
<p>Region completes first Soil Resource Inventory on Santa Fe National Forest</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>1977</h2>
<p>Modified ECOCLASS for Regions 2, 3 and Rocky Mountain Research Station</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>1978</h2>
<p>Terrestrial Ecosystems of the Southwest</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>1980</h2>
<p>Region 3 issues Terrestrial Ecosystem Survey procedures<br><br>
Terrestrial Ecosystem Inventory of the Smokey Bear Ranger District, Lincoln National Forest</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>1983-1984</h2>
<p>Zone inventory teams established on the Apache-Sitgreaves and Carson National Forests</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>1986</h2>
<p>Terrestrial Ecosystem Survey Handbook is revised and issued</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>1987</h2>
<p>First publication of the General Ecosystem Survey (GES)<br><br>
Published Terrestrial Ecosystems Survey of the Apache-Sitgreaves National Forest <br><br>
Published Terrestrial Ecosystems Survey of the Carson National Forest</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>1989</h2>
<p>Second publication of the General Ecosystem Survey (GES)</p>
</div>
</div>
</div>

[KlaraSchmitt · Accepted solution]

Hello @EstellaSmith,

The reason you are having problems and the dots don't show in the right place is because your custom CSS actually uses the same class names that our app relies on for fundamental styling. .container is a critical Bootstrap class that helps establish the whole site layout and the Bootstrap stylesheets are going to apply to your class regardless or whether you want them to or not. You can resolve this by simply changing your custom CSS and HTML from .container to something more unique such as .container-for-timeline. Also, you'll probably want to do that for your custom class .content as well. We use that in our alerts, so the light green background will start showing up in the alert popups unless you change it to something more unique.

[EstellaSmith]

Thank you for your feedback.  I will make the change in the custom CSS.