Выровняйте 2 div с 1 div под

Question

У меня есть два div рядом друг с другом, используя оболочку и следующий код:

#wrapper {
  display: flex;
  margin: 0 auto;
  width: 70%;
  padding: 15px;
}
#first {
    width: 50%;
    padding: 15px;
    margin-right: 10px;
    background-color: white;
    border-radius: 5px;
    background-color: #1F1F1F;
    color: white;
}
#second {
  width: 50%;
  padding: 15px;
  border-radius: 5px;
  background-color: #1F1F1F;
  color: white;
}

И под этими двумя div я получил div шириной 70% со следующим кодом:

    margin: 0 auto;
    border-radius: 5px;
    background-color: #1F1F1F;
    color: white;
    padding: 15px;
    margin-top: 20px;

но кажется, что один div с 70% больше, чем два div рядом друг с другом, потому что div имеет padding 15 пикселей. Как мне выровнять два div с одним div, не удаляя padding из большого div?

См. Изображение: https://cdn.discordapp.com/attachments/483988757360410628/723158686872240188/unknown.png

Answer 1

Используйте * { box-sizing: border-box; }, чтобы включить padding и borders во все значения ширины (вместо добавления их к ширине), а также учитывать / вычислять margin s в общей сумме, которые не включено box-sizing: border-box;.