The CSS style isn't being properly imported.
Below is the base HTML file (base.html) I'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-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"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="homeDesign.css"/>
<title> {% block title %}Base{% endblock %} </title>
</head>
Here is the contents of my CSS file ("homeDesign.css"):
@charset "UTF-8";
.note-card {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}
.container,body {
background-color: #95a1b0;
overflow-x: hidden;
}
.sub-container {
width: auto;
display: flex;
column-gap: 10px;
justify: space-around;
}
The homepage HTML file where the CSS is supposed to be applied (home.html):
<h1 style="color: #1b0e02;">Notes</h1>
<div class="sub-container">
{% for note in user.notes %}
<div class="note-card">
<button type="button" class="close" on-click="deleteNote({{ note.id }})">×</button>
</br>
{{ note.text }}
</div>
{% endfor %}
</div>
**Although applying the style inline works within the head tag, I prefer defining it externally.
Refer to this screenshot of the folder hierarchy: enter image description here