Adding a third element to the row tab cover in HTML

Question

Final one for today.

My current construct is as such with the corresponding .css below it.

 <p>&nbsp;
 </p>
 <p>&nbsp;
 </p>
 <div class="row tab-cover">
 <div class="col-sm-4"><a href="/home" target="_self">Return to 
 Categories</a>
 </div>
 <div class="col-sm-8">
 <p>To Download Table Data Click on the Table then Select Download.
 </p>
 </div>
 </div>

 .tab-cover {
            background-color:#1a4277;
            height: 30px;
            color:#fff;
            font-size: 1.1em;
            padding-top:5px;
  }
 .tab-cover a {
            text-align: right;
            text-decoration: underline;
            color: #fff;
  }
 .tab-cover a:visited {
            color: #fff !important;
  }

I am needing to add a third element to this. The two elements in the code display on the far left and center of a row of blue color. I am needing this third element to show up on the right. It is a link to a document. I tried the following but it does not show up. Any thoughts on how to resolve this?

   <p>&nbsp;
   </p>
   <p>&nbsp;
   </p>
   <div class="row tab-cover">
   <div class="col-sm-4"><a href="/home" target="_self">Return to 
   Categories</a>
   </div>
   <div class="col-sm-8">
   <p>To Download Table Data Click on the Table then Select Download.
   </p>
   <div class="col-sm-8">
   <p><a href="">link text</a>
   </p>
   </div>
   </div>

Answer 1

The issue was the numbers connected to the " " element. When i changed it 4,4,4 instead of 4,8,4 it worked fine.