Как правильно позиционировать элементы на React

Делаю сайт на React и при создании компонентов изменяется позиционирование элементов

App.js

import React,{Component} from 'react';
import './App.css';
import Header from './script/Header';
import Nav from './script/Nav';
import Content from './script/Content';


function App() {
  return (

    <div className="app-wrapper">
      <Header/>
      <Nav/>
      <Content/>
    </div>
  );
}

export default App;

Header

    import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <div>
        <header className="header">
          <img src="https://lh3.googleusercontent.com/proxy/Dkfp27DxQR56qNl_eKuYlRLpKlUvA-TQ-oUVogkd_ICm6a50DXiLHMbW_kZu9DFO6d_C_8Qdz76ufX3z7oXrs8CVgNlYTL1p0qP81PkEsrQ3LvAHzuHOxw"/>
        </header>
      </div>
    );
  }
}

export default Header;

Nav.js

import React, {Component} from 'react';

class Nav extends React.Component {
  render() {
    return (
      <div>
        <nav className="nav">
          <div>
            <a>Profile</a>
          </div>
          <div>
            <a>Message</a>
          </div>
          <div>
            <a>News</a>
          </div>
          <div>
            <a>Music</a>
          </div>
          <div>
            <a>Settings</a>
          </div>
        </nav>
      </div>
    );
  }
}

export default Nav;

Content.js

import React, {Component} from 'react';

class Content extends React.Component {
  render() {
    return (
      <div>
        <div className="content">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTSbQADyALfD2cfnd619yc3RzVGxA_Vl98EisZIghcgh9dFYcXl&usqp=CAU"/>
          <div>
            <img src="https://store-images.s-microsoft.com/image/apps.24119.13561428843663101.db53229a-3063-4dd3-b18e-61ad6b3661d1.b2b9b3b6-0326-402e-be19-4fe9ce86f784?mode=scale&q=90&h=200&w=200&background=%230078D7"/>
          </div>
          <div>
            ava + description
          </div>
          <div>
            My posts
            <div>
              new post
            </div>
            <div>
              post 1
            </div>
            <div>
              post 2
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Content;```

App.css

  display: grid;
  grid-template-areas: "header header" "nav content";
  grid-template-rows: 60px 2fr;
  grid-template-columns: 2fr 10fr;
  grid-gap: 10px;
}

.nav {
  grid-area: nav;
  background-color: green;
}

.header img {
  width: 80px;
  background-color: aqua;
}

.header {
  grid-area: header;
  background-color: aqua;
  width: auto;
}

.content {
  background-color: chartreuse;
  grid-area: content;
}


.content img {
  width: auto;
}

ожидаемый результат

результат