css – React-bootstrap app not rendering something

I am making a Navbar with react-bootstrap, and now the entire app is not rendering something. I am attempting to have the Navbar in a separate part and I even have some css styling in a separate file. What’s the issue? The app is just rendering the background colour.

This is my react-bootstrap part:

import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import {
    BrowserRouter as Router,
    Routes, Route, Hyperlink
  } from "react-router-dom"
import '../css/kinds.css'

const Header = ({consumer}) => {

    const padding = {
        padding: 5
      }

    return (
        <Navbar className="nav" bg="gentle" develop="lg">
          <Container>
            <Navbar.Model href="#dwelling">Nerdr</Navbar.Model>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
              <Nav.Hyperlink href="#" as="span">
                {consumer
                    ? <em>{consumer} logged in</em>
                    : <Hyperlink to="/login">login</Hyperlink>
                }
                </Nav.Hyperlink>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      )
    
}

export default Header

And here is my css file:

physique {
  margin: 0;
  background: #eee;
  font: 1rem / 1.414 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Shade Emoji', 'Segoe UI Emoji', 'Segoe UI Image', 'Noto Shade Emoji';
  colour: #333;
  width: 100%;
}

.nav {
  width: 100%;
}

.container {
  show: flex;
  justify-content: middle;
  align-items: middle;
}

.user-list-wrapper {
  padding: 16px;
  margin: 64px auto 0;
  max-width: 768px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

.user-list-form {
  margin-bottom: 32px;
}

.form-row {
  show: flex;
  flex-wrap: wrap;
}

.form-row + .form-row {
  margin-top: 18px;
}

.form-wrapper fieldset {
  padding: 0;
  margin: 0;
  width: 50%;
  border: 0;
}

.form-wrapper fieldset:first-child {
  padding-right: 4px;
}

.form-wrapper fieldset:last-child {
  padding-left: 4px;
}

.form-label {
  show: block;
  margin-bottom: 6px;
  font-size: 12px;
  colour: #2c3e50;
}

.form-input {
  padding: 8px;
  width: 100%;
  font-size: 14px;
  border: 1px strong #dedede;
  border-radius: 4px;
  transition: border-color .25s ease-out;
}

.form-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 2px #3498db;
  define: 0;
}

.btn,
.btn-remove,
.btn-reset {
  show: block;
  border: 0;
  cursor: pointer;
  transition: all .25s ease-out;
}

.btn-add {
  padding: 12px 18px;
  margin: 12px auto 0;
  font-size: 14px;
  font-weight: 700;
  colour: #fff;
  background-color: #3498db;
  border-radius: 4px;
}

.btn-add:hover {
  background-color: #2980b9;
}

.btn-remove,
.btn-reset {
  padding: 12px 18px;
  margin: 12px auto 0;
  font-size: 14px;
  font-weight: 700;
  colour: #fff;
  background-color: #3498db;
  border-radius: 4px;
}

.btn-remove:hover,
.btn-reset:hover {
  background-color: #2980b9;
}

.btn-reset {
  margin: 21px auto 0;
}