Cant center allign my buttons - html

Question

Im making a portfolio website, since I need to deliver it for school.
Now I'm trying to text-align center my buttons on the webpage. I have tried a lot,
giving the li, ol and several class the : text-align: center, margin-right/margin-left:auto. Nothing seems to work. I've been stuck now for more than 1,5 hour, so it would be amazing if one of you guys could help me out with this problem.
Thanks a lot in advance!
Noah
Picture here : https://imgur.com/EAQTdVM
HTML:
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 midden ">
<ol>
<li>Contact</li>
<li>Work</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-3-offset-3">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Css:
.jumbotron {
background: url("/image/background4.JPG") no-repeat scroll center center / cover;
height: 720px;
margin-top: -20px;
}
div h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 50px;
color: white !important;
text-align: center;
margin-top: 0.2em;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
color: white;
}
a {
text-decoration: none;
color: black;
font-family: 'Open Sans', sans-serif;
border: 3px solid black;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
float: right;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
}
/* Lookbook */
section {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.row-margin {
margin-bottom: 20px;
margin-top: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.less-padding {
padding: 0px;
}
/* Buttons */
li a {
text-decoration: none;
color: white;
font-weight: 200 font-family: 'Roboto', sans-serif;
border: 0.15em solid white;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
width: 120px;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
margin-bottom: 0px;
margin-left: 20px;
}

Answer 1

Some of your markup was off, 'midden' is not a word, all you had to do was 'text-center' the row and it works fine. Good luck!
<div class="jumbotron">
<div class="container container-fluid">
<div class="row text-center">
<div class="col-md-12">
<ul class="list-unstyled list-inline">
<li>Contact</li>
<li>Work</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3-offset-3">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>

Answer 2

Here we go, add these styles
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.jumbotron {
background: url("http://www.govisitcostarica.com/images/photos/full-hot-air-balloons-near-arenal.jpg") no-repeat scroll center center / cover;
height: 720px;
margin-top: -20px;
}
div h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 50px;
color: white !important;
text-align: center;
margin-top: 0.2em;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
color: white;
}
a {
text-decoration: none;
color: black;
font-family: 'Open Sans', sans-serif;
border: 3px solid black;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
float: right;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
}
/* Lookbook */
section {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.row-margin {
margin-bottom: 20px;
margin-top: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.less-padding {
padding: 0px;
}
/* Buttons */
li a {
text-decoration: none;
color: white;
font-weight: 200 font-family: 'Roboto', sans-serif;
border: 0.15em solid white;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
width: 120px;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
margin-bottom: 0px;
margin-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 midden ">
<ol>
<li>Contact</li>
<li>Work</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-3-offset-3">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>

Answer 3

When you're using Bootstrap, you don't want to overwrite the properties provided by the framework. Instead all you need to do is give the container the text-center class and it should work fine.
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 text-center"> <!-- THIS LINE CHANGED -->
<ol>
<li>Contact</li>
<li>Work</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-3-offset-3">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>