I want my app to be an app that you can chat and share notes in. So I have built both the stuff. Both are separate components. So when I tried to split the page in half(one half will be the chat component, the other will be the notes app) using grid, I got weird results.

This was what it looked like when I used grid, looks pretty good right?

This is what it looks when I add the chat component, weird and misaligned

So the chat component was copied from this youtuber Called Fireship. Maybe I didn't change the code to fit the other half properly. But I tried my best using my knowledge of css. All of this is in the main component, this is the code of the main component :

import './App.css';
import Header from './components/Header';
import NotesListPage from './pages/NotesListPage';
import NotePage from './pages/NotePage';
import {useState, useEffect} from 'react';
import Chat from './components/Chat';
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="parent">
      <div className="container dark">
        <div className="app">
        <Header />
        <Route path="/" exact component={NotesListPage} />
        <Route path="/note/:id" component={NotePage} />
        </div>
      </div>
      <Chat />
      </div>
    </Router>

  );
}
export default App;

It might be because of the way I have arranged my code. But I have tried all the combinations and it doesn't seem to work. It is probably a problem caused by the css. The rest of the css is copied and pasted from fireship's video. Here's the css code(parent class) :

.parent {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}