My CSS static file isn't loading as I expected

Question

I'm following a tutorial on building Django Ecommerce Website and apparently I might have messed up somewhere I can't quite figure out. The main.css file seems to be loading incorrectly. I had encountered it before but found a solution. Unfortunately it stopped loading main.css correctly.

This is the main.css:

body{
    background-color: hsl(0, 0%, 98%);
}

h1,h2,h3,h4,h5,h6{
    color:hsl(0, 0%, 30%);
}

.box-element{
    box-shadow:hsl(0, 0%, 80%) 0 0 16px;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
}

.thumbnail{
    width: 100%;
    height: 200px;
    -webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
    -moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
    box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
}

.product{
    border-radius: 0 0 4px 4px;
}

.bg-dark{
    background-color: #4f868c!important;
}

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 20px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
}

.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12{
    margin-top: 10px;
}

.btn{
    border-radius: 0;
}

.row-image{
    width: 100px;
}

.form-field{
    width:250px;
    display: inline-block;
    padding: 5px;
}

.cart-row{
    display: flex;
    align-items: flex-stretch;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ececec;

}

.quantity{
    display: inline-block;
    font-weight: 700;
    padding-right:10px;
    

}

.chg-quantity{
    width: 12px;
    cursor: pointer;
    display: block;
    margin-top: 5px;
    transition:.1s;
}

.chg-quantity:hover{
    opacity: .6;
}


.hidden{
    display: none!important;
}

This is settings.py

"""
Django settings for ecommerce project.

Generated by 'django-admin startproject' using Django 4.0.3.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-(k^b)u8e!a+2=vm6pc)htxf1f=%o$rm#t#_&8m&840%sl2h54$'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'store.apps.StoreConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'ecommerce.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'ecommerce.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_URL = '/images/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

This is main.html

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <title>Ecom</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href=" {% static '/css/main.css' %} ">

    <script type="text/javascript">
        var user = '{{request.user}}'
    </script>

</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="{% url 'store' %}">Ecom</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
          </li>
     
        </ul>
        <div class="form-inline my-2 my-lg-0">
            <a href="#"class="btn btn-warning">Login</a>
            
            <a href="{% url 'cart' %}">
                <img  id="cart-icon" src="{% static 'images/cart.png' %}">
            </a>
            <p id="cart-total">0</p>

        </div>
      </div>
    </nav>

     <div class="container">
            <br>
            {% block content %}


            {% endblock content %}
         </div>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script type="text/javascript" src="{% static 'js/cart.js' %}"></script>

</body>
</html>

Error
Failed to load resource: the server responded with a status of 404 (Not Found) main.css

Answer 1

Maybe this would do the trick?

    <link rel="stylesheet" type="text/css" href="/css/main.css'>