How to make the CSS apply to ONLY the modified forum homepage?

I’m making a modification and I want this modification to only work on the HOME, but it’s taking all the pages, how can I leave it only on the home?

i used this

 #main-outlet-wrapper {
    margin-top: -38px;

<script type="text/discourse-plugin" version="0.8">
  // This is the plugin outlet, followed by a custom name for the component
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Setting up our component
    setupComponent(args, component) {

     // Next we're getting the site setting 'top_menu',
     // splitting the values into an array,
     // and adding a leading slash
     var topMenuRoutes = 
        .map(function(route) {return '/' + route});
     // The first page listed in the 'top_menu' setting is your homepage
     // lets assign it to a variable
     var homeRoute = topMenuRoutes[0];
     // This calls our code whenever the page changes
     api.onPageChange((url) => {

        // Check if we're on the homepage 
        if (url === "/" || url === homeRoute ){ 
          // If it's the homepage add the 'custom-homepage' class to HTML tag
          // and set 'displayCustomHomepage' to true
          component.set("displayCustomHomepage", true); 
        } else {  
          // If we're not on the homepage remove the class
          // and set `displayCustomHomepage` to false
          component.set("displayCustomHomepage", false); 


^ Add this to your head to add a .custom-homepage class to your body tag when you’re on the homepage, then →

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;