Why does the div with absolute position do not sit on the right side?

Question

There is this vertical timeline I am making and the boxes are supposed to sit on both side of a centered bar. But the boxes with class timeline-box-right do not sit on the right side though they have position: absolute;, float:right;, clear:right; and right:0;

Is there any other way I can have them on the right side?

.row{
	clear:both;
	text-align:center;
	display:block;	
	position: relative;
	width: 100%;
}

.wrapper {
  clear:both;
  text-align:center;
  margin:0 auto;
  width: 1100px;
  position: relative;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.timeline {
	background-color:#D1F3C7;
	border: 1px solid #111F8B;
	}

	
.timeline-bar:after {
	content:"";
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 50%;
    width: 4px;
	background-color: #5cb82e;
	opacity: .6;
	}
	
.timeline-inner {
	height: 920px;}
	
.clearfix::before, .clearfix::after {
    content: " ";
    display: table;}
	
.timeline-box {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100px;
	color: #757575;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 25px;}
	
.timeline-box-left {
    float: left;
    clear: left;
	border: 1px solid black;
}

.timeline-box-right {
	position: absolute;
	float:right;
	clear:right;
	right: 0;
	top: 50px;
	border: 1px solid black;
}

.cd-timeline-img {
  position: absolute;
  top: 65px;
  right: 0;
  margin-right: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #5cb82e;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.timeline-box-inner {
	margin-right: 40px;
	background-color:#FFFFFF;
	padding: 20px 5%;
	position: relative;
	border-width: 5px 0 0 0;
	border-style: solid;}

.arrow {
	right: -12px;
	background-position: -18px 0;
	top: 60px;
	width: 12px;
	height: 41px;
	display: block;
	position: absolute;}
	
.fa-university {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}

.timeline-box-left .timeline-box-inner .arrow::before {
    margin-right: 2px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid #fff;
}

.timeline-box-left .arrow::before, .timeline-box-right .arrow::before {
    width: 0;
    height: 0;
    content: '';
    display: block;
}

.timeline-box .date {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 15px;
}

.timeline-box h3 {
    color: #414141;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 20px;
}

.timeline-box h4 {
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
}

p {
    margin: 0 0 25px 0;
}

<div class="row">
        <div class="wrapper timeline">
            <div class="timeline-bar"></div>
            <div class="timeline-inner clearfix">
            	<div class="timeline-box timeline-box-left">
                	<div class="cd-timeline-img cd-movie">
						<i class="fa fa-university" aria-hidden="true"></i>
                    </div>
                    <div class="timeline-box-inner">
                    	<span class="arrow"></span>
                        <div class="date">2014 - 2016</div>
                        <h3> <a href="#"> fyhgdfgfd </a></h3>
                        <h4>kyfhdfgfdgrfds</h4>
                        <p>Lorem ipsum dolor sit amet, te periculis suscipiantur ius. Ei vel nonumy ignota omnesque. Libris aliquam petentium cu pri, ne wisi elitr ignota mea. Ne nostro nominati duo, natum fastidii at nam, mazim dolor deterruisset in vim. Ea pri minim oratio adolescens, probo verear mei te.</p>                  </div>
                </div>
                
                <div class="timeline-box timeline-box-right">
                	<div class="cd-timeline-img cd-movie">
						<i class="fa fa-university" aria-hidden="true"></i>
                    </div>
                    <div class="timeline-box-inner">
                    	<span class="arrow"></span>
                        <div class="date">2014 - 2016</div>
                        <h3> <a href="#"> xfgxfdgx </a></h3>
                        <h4>xfsfdsdfgr</h4>
                        <p>Lorem ipsum dolor sit amet, te periculis suscipiantur ius. Ei vel nonumy ignota omnesque. Libris aliquam petentium cu pri, ne wisi elitr ignota mea. Ne nostro nominati duo, natum fastidii at nam, mazim dolor deterruisset in vim. Ea pri minim oratio adolescens, probo verear mei te.</p>                  </div>
                </div>
                  
            </div>
        </div>
    </div>

Answer 1

You have given the div a class of timeline-box as well as timeline-box-right, and timeline-box has a left:0px style against it. Removing this allows the box to go to the right.