Ok, so i cant seem to center my call to action, any ideas why its stuck to the left? keep in mind that im using bootstrap and sass
<div class="jumbotron">
<nav>
<div class="row">
<div class="col-md-12">
<ul>
<li class="p_nav">Home</li>
<li class="p_nav">About</li>
<li class="p_nav">Work</li>
<li class="p_nav">Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Name</h1>
<p class="p_jumbo">secondary text</p>
<div class="cta">Learn more</div>
</div>
</div>
and the css. Do i need a parrent with a position tag maybe?
.jumbotron {
height: 100vh;
background-image: url("/img/jumbobg.png");
background-size: cover; }
nav ul {
list-style: none; }
nav ul li {
display: inline;
float: right;
margin: 20px;
padding: 0px;
margin-top: 0px; }
.cta {
border: 1px solid #FFFFFF;
border-radius: 100px;
font-family: Avenir-Light;
font-size: 20.25px;
color: #FFFFFF;
display: inline-block;
padding: 10px 20px;
text-align: center;
margin: 0 auto; }
The margin: 0 auto
isn't working because of inline-block
display.
remove this line and give your cta a width.
.cta {
border: 1px solid #FFFFFF;
border-radius: 100px;
font-family: Avenir-Light;
font-size: 20.25px;
color: #FFFFFF;
/* display: inline-block; */
padding: 10px 20px;
text-align: center;
margin: 0 auto;
width: 200px;
}