Bug: Rendering same code in different files produces different results

[vymao]

I am using React 17.0.2.

I have some code:

import React from "react";
import logo from "./white_lotus.jpeg";

import "./test.css";
function Header() {
  return (
    <div className="header">
      <div className="header-left">
        <div className="header-logo-link">
        <img
              className="header-logo"
              src={logo}
              alt=""
            />
        </div>
      </div>

    </div>
  );
}

export default Header;

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid lightgray;
}


.header-left{
  margin-left: 2%;
  justify-content: space-between;
  display: flex;
  width: 50px;
  height: inherit;
  align-items: center;
  background-color: red ;
}


.header-logo {
  height: 20px;
}

which when rendered in two different files, produces different output. In one, it produces this:

where the logo and associated div are stretched out. I rendered this in the App file itself:

function App() {
  return (
    <div className="app">
      <Header />
    </div>
  );
}

export default App;

When I try it in a new create-react-app, it renders perfectly fine:

I do not see why this is. Is there any sort of caching that may affect the rendering between one app and another?

[vymao]

I believe this is due to the fact that in my first app, I also have various imports, where I import other function components; when I delete these imports, it renders fine.

However, I never use these function components in the actual code. How is it that they can still affect the rendering?