JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="left">
        <div class="logo">контент с логотипами</div>
    </div>
    <div class="right">
        <div class="menu">контент с меню</div>
    </div>
</header>
<section>
    <div class="wrap">
        основной контент
    </div>
</section>
<footer>
    <div class="wrap">
        контент подвала
    </div>
</footer>

CSS

.wrap {margin:0 auto; width:960px /* максимальная фиксированная ширина контента */} 
header {width:100%}
header .left {float:left; width:672px /* 70% от .wrap */; backround:url(for_left)}
header .right {float:left; width:288px /* 30% от .wrap */; backround:url(for_right)}
header .left .logo {float:right; width:672px /* 70% от .wrap */; backround:url(bg_behind_logo); text-align:right}
header .right .menu {float:left; width:288px /* 30% от .wrap */}
header::after {}