Centering things! Navigation bar and header - html

Question

I am really new to coding. Formatting is always an issue with me and I spend lots of time looking at similar questions in here and reading tutorial etc and tried different things. I have the exact same code on one page and it seems center. However I can't get my items centered here or replicate. Once I have my header centered I would like my nav bar to be centered underneath. PLease help.
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
width: 470px;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

Answer 1

To center the title: make .box width:100% and the h2 text-align:center.
To center the ul menu I followed the solution three: align ul to center of div
html,
body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%; // NEW WIDTH
padding: 10px;
display: inline-block;
}
.box h2 {
text-align: center; // CENTER TITLE
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align: middle;
border-radius: 0px;
background-color: white;
display: inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table; // SOLUTION 3
margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home
</li>
<li>About
</li>
<li>Gallery
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>

Answer 2

I see that you're using Bootstrap. You can do what you want with a lot less markup.
.nav-pills > li {
float: none;
display: inline-block;
}
<div class="container text-center">
<h2>lewis <br><span>Designs</span></h2>
<ul class="nav nav-pills text-center">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Demo JSFiddle

Answer 3

You can make use of better semantic code to make it clear how this section is functioning and then simplify the code with built-in classes in Bootstrap, e.g., text-center.
<header class="header text-center" id="header">
<h1>lewis Designs</h1>
<nav>
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
The only CSS needed to center the nav is this:
nav {
display: inline-block;
}
I'd definitely recommend familiarizing with documents pertaining to things like utility classes in Bootstrap. You may not be able to do everything you want, but you can minimize the need to go markup heavy and create a bunch of classes that Bootstrap already has covered in various ways.

Answer 4

Is this good for you? (please look at the snippet)
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
text-align: center;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 100%;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center-box{
margin-left: auto;
margin-right: auto;
width: 391px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>lewis <br />
<span>Designs</span>
</h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class='center-box'>
<ul class="nav nav-pills">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>