title: Why does my CSS not work in an EJS file rendered inside an if statement
body: <p>I'm trying to apply CSS to this EJS file but no matter what kind of styling I apply nothing works. Here is the code sample:</p>
  <p><strong>itemEdit.ejs</strong></p>
  <pre><code>&lt;%- include(&quot;partials/header.ejs&quot;, {title: ` - Items`, body_id: `items`} )%&gt;
  &lt;%- include(&quot;partials/navbar.ejs&quot;, {bg: `dark`})%&gt;
  
  &lt;div class=&quot;edit-container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;h1&gt;Edit item&lt;/h1&gt;
          &lt;a href=&quot;/items&quot;&gt;
              &lt;&lt;&lt;-Back to items page&lt;/a&gt;
  
      &lt;form action=&quot;/itemEdit/item-edit/&lt;%= item._id%&gt;&quot; method=&quot;post&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;enter item name&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;description&quot; placeholder=&quot;enter item description&quot;&gt;
          &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;%- include(&quot;partials/footer.ejs&quot;)%&gt;
  </code></pre>
  <p><strong>index.ejs</strong></p>
  <pre><code>app.get('/itemEdit/:id', isLoggedIn, (req, res) =&gt; {
      // Query for session user object
      User.findById({ _id: req.user._id },
          (err, doc) =&gt; {
              if (err) { console.log(err); }
              else {
                  const { userInventory } = doc
  
                  for (let i = 0; i &lt; userInventory.length; i++) {
                      if (userInventory[i]._id == req.params.id) {
                          res.render('itemEdit.ejs', {
                              item: userInventory[i], // Item object
                              user: doc // Session user object
                          })
                      }
                  }
              }
          })
  })
  </code></pre>
  <p>This is what I added to the CSS to test if it's working.</p>
  <p><strong>style.css</strong></p>
  <pre><code>.edit-container {
      background-color: red;
  }
  </code></pre>
  <p>Even after I added the red background it doesn't show that styling. The CSS is loaded from the header.ejs file and I can confirm that it works on all the other EJS files except this one. Could it be because I have it inside an IF statement and that's why the CSS won't apply and even the FOOTER won't display properly even though it works on all the other EJS pages.</p>
  <p>Any help is appreciated!</p>
  <hr />
  <p><strong>UPDATE</strong></p>
  <p>After playing around in the console, I noticed that the app is treating the itemEdit.ejs file as a folder. See screenshot:
  <a href="https://i.stack.imgur.com/m1HY0.png" rel="nofollow noreferrer">console</a>. What would be the reason for this? I never made it into a folder, it's only a simple EJS file.</p>