центрирование элемента шириной 900 пикселей с оранжевым фоном слева и белым справа

Question

У меня есть элемент на моей html-странице, который я хочу центрировать на экране.Это было легко.Однако: я хочу, чтобы фон слева от моего элемента был оранжевым, в то время как фон справа должен быть белым.Я думал о таком решении, как:

<div id="outer">
  <div id="middle">
    <div id="inner">
      <p>some content</p>
    </div>
  </div>
</div>

с помощью css:

#outer {
  width: 100%;
  background-color: white;
}
#middle {
  background-color: orange;
}
#inner {
  width: 900px;
}

Единственное, чего здесь не хватает, - это получить #inner в центр.Есть ли способ, которым я могу изменить отступы или поля #middle или #inner, чтобы получить желаемый результат?

Answer 1

используйте это:

#middle {
  background-color: orange;
  margin: 0 auto;
}