I have a head tag filled with CSS styles and my body tag contains a navbar and a basic header. However, the well surrounding the header's row is not displaying, along with its border. I need assistance in fixing the well so that it properly surrounds the text "Jesus is Lord" for a clean appearance. Additionally, I would like the well to have an opacity of 0.8. The live page can be viewed at theredstonetaco.com.
<html>
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<!-- bootstrap css, jQuery, popper, bootstrap js-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
well {
border: solid 5px green;
}
</style>
<!-- title -->
<title>Homepage</title>
<!--
background
and
navbar
-->
<!-- full-page cross image -->
<div style="position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;">
<img style="width:100%;height:100%;" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Christian_cross.svg" alt="full-page cross" />
</div>
<!-- outer navbar, dark, dark, fixed position -->
<nav class="navbar navbar-light bg-light navbar-fixed-top">
<!-- fluid container -->
<div class="container-fluid">
<!-- row for dropdowns -->
<div style="flex-grow:1;" class="row">
<!-- left dropdown (taccount) -->
<div style="flex-grow:1;"class="col col-xs-4">
<ul class="navbar navbar-nav">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkLeft" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
taccount
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkLeft">
<a class="dropdown-item" href="login.php">login</a>
<a class="dropdown-item" href="register.php">register</a>
<a class="dropdown-item" href="#">profile</a>
<a class="dropdown-item" href="#">settings</a>
</div>
</li>
</ul>
</div>
<!-- middle homepage button (tacopage) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav">
<li>
<a href="homepage.php">tacopage</a>
</li>
</ul>
</div>
<!-- right dropdown (tactions) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
tactions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
<a class="dropdown-item" href="Christmas.php">Christmas</a>
<a class="dropdown-item" href="dad.php">dad</a>
<a class="dropdown-item" href="https://youtube.com/theredstonetaco">youtube</a>
<a class="dropdown-item" href="dating.php">dating</a>
<a class="dropdown-item" href="#">about</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- embed addons to layout -->
<div class="well">
<div class="row">
<div class="col"></div>
<div class="col text-center" style="opacity: 0.8; color: #000A8C;">
<h1>Jesus is Lord</h1>
</div>
<div class="col"></div>
</div>
</div>