My application relies on Bootstrap for its styling. Despite attempting to override the default Bootstrap styles by loading my custom CSS file after Bootstrap, I am still not achieving the desired end result. Can anyone point out what I might be overlooking? Below is a minimal working example (MWE) that showcases the issue.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
@media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
... <!-- rest of index.html content as described in original text, including links and structure -->
If I remove the line #24 where Bootstrap is loaded, the layout appears as shown in Figure 1 (expected behavior). However, when Bootstrap is included, the actual view resembles Figure 2, deviating from expectations.
Figure 1
https://i.sstatic.net/Rj9u5.png
Figure 2
https://i.sstatic.net/BC6bQ.png
To clarify, my objective is to have additional padding surrounding the menu bar on all sides. Currently, the menu bar lacks padding either at the top or on both sides.