Навигация не сосредоточен на заголовке, а сосредоточен на странице! Bootstrap.

Question

Я новичок в кодировании.
У меня есть панель навигации, на которой я сосредоточен на странице ... но я бы хотел, чтобы она была сосредоточена на моей заголовок.

<div class="header" id="header"> 
<div class="container"> 
<div class="row row-centered"> 
<div class="col-md-4 col-centered"> 
<div class="box"> 
<a href="#"><h2>lewis <br><span>Designs</span></h2></a></div></div></div> 
    <div class="menu"> 
    <div class="row row-centered"> 
    <div class="col-md-6 col-centered"> 
<ul class="nav nav-pills"> 
<li><a href="./index.html">About</a></li> 
<li><a href="./consultation.html">Consultations</a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul></div></div></div> 
    .box {position:relative; 
     border: 2px white dotted; 
     margin-top: 100px; 
     margin-right: auto; 
     margin-left: auto; 
     width: 400px; 
     display:inline-block;} 
.nav-pills li a {color: black; 
     border-radius: 10px; 
     vertical-align:middle; 
     display:inline-block;} 
.header .box { margin-left:auto; 
     margin-right:auto; 
     position:relative; 
     vertical-align: middle;} 
    .nav-pills {position: relative; 
     margin-top: 40px; 
     vertical-align: middle; 
     margin-left:auto; 
     margin-right:auto; 
     text-align:center;} 

Можете ли вы помочь ???

Answer 1

Установите ширину Div по ширине коробки заголовка, и это должно достичь требуемого результата

.col-centered{width:400px} 

или, альтернативно, сделать раздел заголовка того же размера, что и поле. }

.header .box { 
    width: 100%;} 

до тех пор, как они имеют одинаковый размер по ширине и использовать центральную CSS выравнивания текста, то они должны правильно выстроить.