How to position your stylesheets in react?

See more:

Javascript

CSS3

Typescript

I have an issue, the issue is the following; I have sidebar.js which should be position at the top right but the navbar.js is filling the page at the top with Header.js. But all the set are in stylesheet and content should be in the middle to be fit for logic and image(set to on the left must fit with correct size to allow for content and header be equal and sidebar to fit together as one fitted web page).

The goal i want all of these to fit together and sidebar be as a card so can populate my rest api inside, hope make sense.

What I have tried:

<pre lang="Javascript">

/**
* All the stylesheet for the application
*@author:Gcobani Mkontwana
@date:14/06/2022
*/

* {
  box-sizing: border-box;
}

/* Style the body */
body {
    font-family: Arial, Roboto, sans-serif;
    margin: 0;
  }
  
  /* Header/logo Title */
  .header {
    padding: 80px;
    text-align: center;
    background: #269faf;
    color: white;
  }
  
  /* Increase the font size of the heading */
  .header h1 {
    font-size: 40px;
  }
  
  /* Style the top navigation bar */
  .navbar {
    overflow: hidden;
    background-color: #FF6600;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 15px;
    text-decoration: none;
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #FF6600;
    color: orangered;
  }
  
  /* Column container */
  .row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  /* Main column */
  .main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
  }
  
  
  
  /* Footer */
  .footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
  }


  /**
    Content
  */
  .on-time-delivery-g {
    color: #FF6600;
    font-family: Roboto;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
  }

    /*
    Free shipping
  */
  .free-shipping-up {
    color: #FF6600;
    font-family: Roboto;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
  }


  /**logo*/
  .logo {
    width: 46px;
    height: 40px;
  }


  /**
    Button stylesheet here.
  */

//Header.js

/**
 * Header for the application
 */

 import React, { Component } from 'react';

 class Header extends Component {
   render() {
     return (
       <div className="header">
       </div>
     );
   }
 }
 
 export default Header

//Content.js

/**
 * The content for the web application.
 */

 import React, { Component } from 'react';

 class Content extends Component {
   render() {
     return (
       <div className="main">
           <img alt="expo" src={require('./images/drone_image.png')}  className="left"/>
       </div>
     );
   }
 }
 
 export default Content

//Sidebar.js

/**
 * The content for the web application.
 */

 import React, { Component } from 'react';

 class Sidebar extends Component {
   render() {
     return (
       <div className="side">
   
       </div>
     );
   }
 }
 
 export default Sidebar