Arman4ik

Если вы хотите использовать для показа и скрытия контента CSS-селекторы соседей, то ваши радиокнопки и блоки с контентом должны находится на одном уровне вложенности! Примерно так:

<input class="input" type="radio" name="tabs" id="tab-1" />
<input class="input" type="radio" name="tabs" id="tab-2" />
<div class="content content-1">content 1</div>
<div class="content content-2">content 2</div>

Стили для показа блоков с контентом:

.content { display: none; }
#tab-1:checked ~ .content-1 {display: block;}
#tab-2:checked ~ .content-2 {display: block;}

Нет. Инпут и таб должны иметь одного родителя, тогда сработает селектор ~.

Вынуть зелёный блок из контейнера и дать ему подобный стиль

.green-wrapper {
  margin-left: calc(50% - 1300px/2);
}

Ну и дальше менять значение на брейкпоитнах

ПС. Недавно встретил любопытное решение этой же задачи, но как по мне излишне усложненное
https://www.youtube.com/watch?v=NVdlfhkDAGM

Куда требуется отправить данные пользователя?
Можно, например, просто на почту: https://www.smtpjs.com/

<script src="https://smtpjs.com/v3/smtp.js">
</script>

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);