Alinear al centro en pantallas XL es simple (y todas en general). Al contenedor principal `principal_container` le debes indicar que es un elemento de bloque (como es un `div` es automático, así que simplemente le quito el `inline-block`), poner un ancho máximo y luego indicar que los márgenes sean `auto`. El navegador centrará automáticamente el contenedor.

Aquí lo puedes ver funcionando (las secciones las veremos abajo):


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
      box-sizing: border-box;
    }

    body {
      background: #f1f2f2;
      font-family: arial;
    }

    .principal_container {
      background: white;
      padding: 5px;
      margin: auto auto;
      max-width: 1024px;
    }

<!-- language: lang-html -->

    <div class="principal_container">

      <section class="section content_01">
        A
      </section>
      <section class="section content_02">
        B
      </section>
      <section class="section content_03">
        C
      </section>

    </div>

<!-- end snippet -->

En tu caso, el ancho máximo no sería 1024px, sino 960px (el máximo de A/C) + 10em de B + 20px de los márgenes de las secciones. De ese modo estarías imponiendo un ancho máximo efectivo de 960px a A y C, sin especificarlo de manera explicita.

Ahora, para lo que quieres de maquetar las secciones, puedes usar un `grid`. Y para ser sincero: lo tenías básicamente hecho, lo único que he cambiado con respecto a tu ejemplo ha sido un valor y ya funciona. Quita el `calc` del ancho de la columna en `grid-template-columns` y dale el valor `auto` para que A y C siempre ocupen el espacio disponible.

Puedes dejar el `order: 3` para el bloque B, porque se seguirá aplicando con `grid` también. Y si no especificas columnas, entonces automáticamente ocuparán todo el ancho (al ser secciones) y harás que B aparezca al final sin afectar a su posicionamiento cuando la pantalla sea más grande de 720px.

Aquí lo puedes ver funcionando:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
      box-sizing: border-box;
    }

    body {
      background: #f1f2f2;
      font-family: arial;
    }

    .principal_container {
      display: grid;
      background: white;
      padding: 5px;
      margin: auto auto;
      max-width: calc(960px + 10em + 20px);
    }

    .section {
      border: 5px solid blue;
      padding: 5px;
      margin: 5px;
    }

    .content_02 {
      order: 3;
    }

    @media all and (min-width: 720px) {
      .principal_container {
        grid-template-columns: [col1-start] auto [col2-end] 10em;
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
      }
      .content_01 {
        grid-column: col1-start;
        grid-row: row1-start;
      }
      .content_02 {
        grid-column: col2-end;
        grid-row: row1-start / row2-end;
      }
      .content_03 {
        grid-column: col1-start;
        grid-row: row2-start;
      }
    }

<!-- language: lang-html -->

    <div class="principal_container">

      <section class="section content_01">
        A
      </section>
      <section class="section content_02">
        B
      </section>
      <section class="section content_03">
        C
      </section>

    </div>

<!-- end snippet -->

-----

Sobre añadir nuevos elementos: si añades nuevos bloques a tu estructura, estos elementos van a afectar el tamaño y la estructura del `grid` y tendrías que cambiar el CSS porque ahora mismo es específico para 3 elementos.

Lo que podrías hacer sería especificar que va a haber dos columnas (1 auto y la otra de 10em) y que todas las filas van a ser `auto`. Para todas las secciones, la columna será la 1, y no hace falta especificar un row, que será `auto` por defecto. Luego para `.content_02` especificar que su columna va a ser la 2 y para la fila lo que puedes hacer es especificar que va a empezar en la primera y terminar en un número muy grande (más grande que el número de nuevos elementos que se vayan a añadir), de ese modo crecerá automáticamente hasta ocupar todo el espacio disponible (tiene que haber un modo mejor de hacerlo, esto es demasiado _hacky_).


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
      box-sizing: border-box;
    }

    body {
      background: #f1f2f2;
      font-family: arial;
    }

    .principal_container {
      display: grid;
      background: white;
      padding: 5px;
      margin: auto auto;
      max-width: calc(960px + 10em + 20px);
    }

    .section {
      border: 5px solid blue;
      padding: 5px;
      margin: 5px;
    }

    .content_02 {
      order: 3;
    }

    @media all and (min-width: 720px) {
      .principal_container {
        grid-template-columns: auto 10em;
      }
      section {
        grid-column: 1;
      }
      .content_02 {
        grid-column: 2;
        grid-row: 1 / 999999;
      }
    }

<!-- language: lang-html -->

    <div class="principal_container">

      <section class="section content_01">
        A
      </section>
      <section class="section content_02">
        B
      </section>
      <section class="section content_03">
        C
      </section>
      <section class="section content_04">
        D
      </section>
      <section class="section content_05">
        E
      </section>
    </div>

<!-- end snippet -->