Getting HTTP 404 for CSS file although I have set the static URL,Root,Dirs in settings.py file

Question

I am new to django and I'm trying a simple web application where I am using CSS with static tag.

I have configured settings.py as

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,"static")
STATICFILES_DIR = [
    os.path.join(BASE_DIR,"static"),
]

This is my navigation bar file which I included in my home page

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'CreditCardNumberValidator/css/main.css' %}">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  ......
</div>

Everytime I load the home page I get "GET /static/CreditCardNumberValidator/css/main.css HTTP/1.1" 404

Attached the project structure

• CreditCardValidator

  • CreditCardNumberValidator
  • CreditCardValidator
  • templates
    • index.html
    • navbar.html
  • static
    • CreditCardNumberValidator
      • css
        • main.css

I am not able to find what I've missed.