Подскажите правильное решение

Общее
1 
Добрый день!

Верстаю для учебы резиновый сайт:

1. Тянется от 900px, до 1200px. 
2. Контент центруется по центру, и есть боковые паддинги 2% ( от ширины 900-1200px)
3. У сайта меняется фон с помощью радиобаттон (реализация через css)
4. На сайте карта, которая тянется на всю ширину вьюпорта.

Я прикинул сетку, получается очень громоздкой. Можно ли ее упростить, или это правильное решение.

//Переключатели фона сайта
<input type="radio">
<input type="radio">
//Обертка для фона
<div class="wrapper-background">
    	//Обертка для максимальной и минимальной ширины и для центрования
    	<div class="wrapper-width">
    			//Обертка  и задания боковых паддингов в процентах
    			<div class="wrapper-padding">
    					//контент сайта
    			</div>
    	</div>
    	//карта тянется на всю ширину
    	<div class="map"></div>
    	//Обертка для максимальной и минимальной ширины и для центрования
    	<div class="wrapper-width">
    			//Обертка  и задания боковых паддингов в процентах
    			<div class="wrapper-padding">
    					//контент сайта
    			</div>
    	</div>
</div>
2

<div class="wrapper-background"> пока что мало отличается от .body – может пока можно обойтись без него?

Попытался убрать <div class="wrapper-padding">, а внутренние отступы назначить .wrapper-width – результат не понравился, второе правило не соблюдается…

Так, что больше лишних блоков не вижу…

Впрочем, возможен и такой вариант 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  body {
    min-width: 900px;
  }
  
  .wrapper-width {
    min-width: 900px;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 2%;	
    padding-left: 2%;	
    outline: 1px solid red;
   }
</style>
</head>
<body>
  <input type="radio">
  <input type="radio">
  <div class="wrapper-width">Контент сайта</div>	
  <div class="map">Карта</div>
  <div class="wrapper-width">Какой-то контент</div>
</body>
</html>
3

Большое спасибо за ответ!!!

wrapper-background оставляю, т.к. ему передаю разный фон в зависимости от input :
#input1:checked ~ .wrapper-background {
background-color: black;
} и т.д.
Насчет body не знаю способов как ему передать background в зависимости от input. Есть какие то варианты на чистом CSS?

Второй ваш вариант затестил. Когда body = 900 - 1200, все норм, padding сходится. Но когда больше 1200, то увеличивается паддинг и опять второе правило не выполняется.