How do I make my timeline a lot larger on my page were it still looks good?

I have a horizontal timeline on my website, I want it to be much larger and stand out. I will put the HTML, CSS, and a pic of how it currently works. I also want to change the color to white on the orange line. Text and content on the whole webpage is fairly large.
enter image description here

.timeline {
  padding: 0px;
  width: 800px;
  height: 20px;
  list-style: none;
  text-align: justify;
  margin: 80px auto;
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(45%, rgba(255, 255, 255, 0)),
    color-stop(51%, rgba(191, 128, 11, 1)),
    color-stop(57%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(191, 128, 11, 1) 51%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0) 100%
  );
}

.timeline:after {
  display: inline-block;
  content: "";
  width: 100%;
}

.timeline li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #7597de;
  text-align: center;
  line-height: 1.2;
  position: relative;
  border-radius: 50%;
}

.timeline li:before {
  display: inline-block;
  content: attr(data-year);
  font-size: 26px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
  top: -40px;
}
.timeline li:nth-child(even):before {
  bottom: -40px;
}

.timeline li:after {
  display: inline-block;
  content: attr(data-text);
  font-size: 16px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):after {
  bottom: 0;
  margin-bottom: -10px;
  transform: translate(-50%, 100%);
}
.timeline li:nth-child(even):after {
  top: 0;
  margin-top: -10px;
  transform: translate(-50%, -100%);
}
<!--StartofTimeline-->
<ul class="timeline">
  <li data-year="2017" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2018" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2019" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2020" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
  <li data-year="2021" data-text="Lorem ipsum dolor sit amet, consectetur."></li>
</ul>
<!--EndofTimeline-->

Thanks in advance for any and all help.