Bootstrap col-xs-12 in HTML is not taking full width - html

Question

I've created a simple button link in my page with container-fluid and row classes so that I can take utilize the whole available width of the page for the link button.
However, my code doesn't result in the button taking full width of the page. Attached is the screenshot of the said output.
Please inform me as to what I'm doing incorrectly. Thanks in advance.
[Basically what I want is that the well in the below screenshot should take 100% (or atleast 90% and centered) of the page width.]
My HTML and CSS codes are mentioned below:
My HTML Code:
<div class="container-fluid">
<div class="row">
<section id="access_list_session" class="col-sm-12">
<br/>
<p id="form-header"> Access Colleague List </p>
<br /><br /><br />
<div class="row">
<div class="hidden-xs hidden-sm col-md-4">
<i class="fa fa-5x fa-cogs" aria-hidden="true"></i>
</div>
<div class="well col-xs-12 col-sm-12 col-md-8">
<div id="form_link">
<i class="fa fa-list-alt" aria-hidden="true"></i> Click to access our Colleague List<br /> <span style="font-size: 10px; text-align:center;"">(Use of this list is subject to our Privacy Policy and other T&C)</span>
</div>
<br/>
<hr>
<p> In case of any difficulty please contact the site administrator using the form below.</p>
</div>
</div>
</section>
</div>
</div>
My CSS Code
#form_link a
{
width: 100%;
font-size: 1em;
}
.row
{
padding-top: 60px;
height: 60em;
width: 100%;
}

Answer 1

2 solutions IMHO :
Add in .row
.row {
margin: auto;
}
to center your block (see https://jsfiddle.net/os7frkq5/1/)
or simply delete width: 100% :
(see https://jsfiddle.net/os7frkq5/2/ )

Answer 2

I don't know if this is what you mean but you can try this:
<div class="container-fluid">
<section id="access_list_session" class="col-md-12">
<br/>
<p id="form-header"> Access Colleague List </p>
<br /><br /><br />
<div class="row">
<div class="hidden-xs hidden-sm col-md-4">
<i class="fa fa-5x fa-cogs" aria-hidden="true"></i>
</div>
<div class="well col-xs-12 col-sm-12 col-md-12">
<div id="form_link">
<i class="fa fa-list-alt" aria-hidden="true"></i> Click to access our Colleague List<br /> <span style="font-size: 10px; text-align:center;"">(Use of this list is subject to our Privacy Policy and other T&C)</span>
</div>
<br/>
<hr>
<p> In case of any difficulty please contact the site administrator using the form below.</p>
</div>
</section>
</div>

Answer 3

What you want is the a element to use block-display.
a { display: block }
Read up on the differences between inline and block elements, because it's vital to the way they're laid out.