CSS paginas de estilos

React: 16.2.0 Bootstrap: 4.0.0 React-router-dom: 4.2.2

Bom dia, Estou com uma duvida referente ao funcionamento do CSS, por exemplo Tenho 4 arquivos JS , login.js, Concessionaria.js, Carro.js e Moto.js, nas telas Concessionaria, Carro e Moto eu tenho uma sidebar na lateral esquerda, e por isso todo os outros componentes que renderizo nesses arquivos precisa ir para a direita, por conta da Sidebar.

Para resolver isso fiz o seguinte CSS.

Concessionaria.css

header, main, footer {
    padding-left: 240px;
    }
    @media only screen and (max-width : 991px) {
    header, main, footer {
      padding-left: 0;
    }
    }

Esse css eu puxo dentro do arquivo Concessionaria.js que possui as rotas para Carro e Moto.

Mas a margem que eu defini já esta pegando na tela de Login.js.

Como isso pode acontecer, pois estou puxando o Css apenas na tela Concessionaria.js.