HTML, CSSでのレイアウト

(2017-08-04 07:14修正)
初めて質問させていただきます。

###前提・実現したいこと
現在、Webデザインの勉強中で
HTML, CSSを用いたレイアウトに苦戦しています。
PC用のデザインで下の図のような
デザインをしようとしています。
イメージ説明
A,B,Cは固定幅で画面の横幅が伸びたときも
A,B,Cは固定幅のまま画面中央部に配置し、
他の背景だけが伸びるようにしたい場合、
どのように組めば最適でしょうか。

###試したこと
floatで試みたり、
flex-boxで試みたりしていますが、
組み方とCSSのあて方が悪いようでうまくいきません。
今はセマンティックを無視するような
力技で組んでいますが、
もっと分かりやすく
管理しやすい構成にしたいです。

html
<html>
<body>
  <header></header>
  <main class="clearfix">
    <div class="A"></div>
    <div class="BandC">
      <div class="B"></div>
      <div class="C"></div>
    </div>
  </main>
  <footer></footer>
  <style>
    header,
    footer {
      position: relative;
      width: 100%;
      height: 50px;
      background: #0468AD;
    }

    main {
      width: 1000px;
      margin: 0 auto;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .A {
      float: left;
      width: 600px;
      height: 400px;
      background: #719BA5;
    }

    .BandC {
      float: right;
      width: 400px;
    }

    .B,
    .C {
      width: 100%;
      height: 200px;
    }

    .B {
      background: #337D8B;
    }

    .C {
      background: #013356;
    }

    header::before {
      position: absolute;
      display: block;
      content: "";
      background: #05BAA3;
      width: calc(50% + 100px);
      height: 400px;
      top: 50px;
      left: 0;
      z-index: -10;
    }

    header::after {
      position: absolute;
      display: block;
      content: "";
      background: #1E4F5B;
      width: calc(50% - 100px);
      height: 200px;
      top: 50px;
      right: 0;
      z-index: -10;
    }

    footer::before {
      position: absolute;
      display: block;
      content: "";
      background: #A4E6F3;
      width: calc(50% - 100px);
      height: 200px;
      bottom: 50px;
      right: 0;
      z-index: -10;
    }
  </style>
</body>
</html>