Проблемы с центрированием ввода и текста с границами

Question

У меня возникают трудности с центрированием ввода и границ вокруг текста, который я создал. Я пытаюсь сосредоточить его на настройках, основанных на процентах, чтобы он стал более отзывчивым. Кажется, что процентные ставки отключены, и каждый раз, когда я перехожу через left: 35%;, он больше не перемещается.

То же самое относится к моей кнопке отправки, внутри ввода поиска. Я снял процент, потому что ничего не сделал.

Я хранятся все мои кода внутри этой скрипкой:

https://jsfiddle.net/ghp4t489/

Но, чтобы получить лучший вариант, чтобы посмотреть, что я пытаюсь сделать, это посетить мой сайт. realtorcatch.com/test_index

Как я могу получить текст с границами/панель поиска, чтобы они были центрированы на странице?

Вот мой CSS

.search_option_container_out { 
    text-align: center; 
    top: 450px; 
    left: 30%; 
    position: absolute; 
    z-index: 111; 
} 
.search_option_box { 
    position: absolute; 
    text-align: center; 
    left: 40%; 
} 
.search_option_box li { 
    display: inline; 
    border: 1px solid black; 
    line-height: 2em; 
    padding: 20px 75px; 
    background: rgba(24, 24, 24, 0.3); 
    color: #FFFFFF; 
    cursor: pointer; 
} 
.search_option_box li:hover { 
    background: rgba(0,0,255, 0.3); 
} 
.home_searchbar_out { 
    text-align: center; 
    padding-top: 60px; 
} 
.home_searchbar { 
    padding: 10px; 
} 
.home_search_input { 
    position: absolute; 
    left: 45%; 
    width: 575px; 
    padding: 14px; 
    font-size: 1.1em; 
} 
#home_search_submit { 
    padding: 11px 20px; 
    position: absolute; 
    background-color: blue; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-size: 1.1em; 
    z-index: 1; 
} 

Answer 1

код демо здесь: https://jsfiddle.net/ghp4t489/4/

по существу, вы хотите использовать концепцию центрирование контейнера внутри страницы, как так:

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div>my div here</div>

Этот код использует margin: auto, чтобы центрировать div на странице.

EDIT:https://jsfiddle.net/ghp4t489/7/ с кнопкой справа и рядом с входом

https://jsfiddle.net/ghp4t489/9/ с помощью кнопки справа внутри входа