Как центрировать встроенные элементы

Question

То, что я пытаюсь сделать, - это центр моего названия в середине страницы. Он встроен в панель поиска и центрируется на основе расстояния от края панели поиска до другой стороны. Как я могу это сделать, чтобы он игнорировал, где находится панель поиска? https://jsfiddle.net/nyvxhb4h/, поэтому в jsfiddle навигационное меню центрировано, поэтому заголовок должен быть прямо над ним. Благодаря -Kyle

Вот область проблема, я думаю, упаковывают jsfiddle ссылка перестает работать:

#head { 
    margin: 2% auto 2% auto; 
    text-align: center; 
} 

#head h1 { 
    display: inline; 
} 

<div id="head"> 
    <h1> Title </h1> 
    <form action="test.asp" style="float:right; margin-right: 3%;"> 
     <input type="text"> 
    </form> 
</div> 

Answer 1

Переместите form перед h1 и обновить свой CSS в position:absolute; right:0. https://jsfiddle.net/nyvxhb4h/1/

<div id="head"> 
    <form action="test.asp" style="position:absolute; right:0; margin-right: 3%;"> 
     <input type="text"> 
    </form> 
    <h1> Title </h1> 
</div>