Bootstrap 5 - justify-content - hower background for whole <li> - css

I have a code currently. This is dirt.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta class="nav-lin" tags -->
<meta class="nav-lin" charset="utf-8">
<meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.container {
max-width: 1170px;
}
.bg-dark {
background-color: #90080a !important;
}
ul li {
border-right: 1px solid #c88383;
}
ul li:hover {
background-color: #7b0204;
}
ul li:last-child {
border: none
}
.nav-link {
padding: 0.5rem 0;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<header class="text-white bg-dark">
<ul class="nav justify-content-around">
<li>
<a class="nav-link text-white py-3" href="#">Trio Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Engagement Rings</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3 " href="#">More</a>
</li>
</ul>
</header>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
I want to determine. Why the background does not extend to the whole li. How to achieve this? Elements are incorrectly arranged. I want to achieve → https://i.imgur.com/JXoaFlo.png. I would like to work on the Flex container.
I need to find out what is missing. This is my first time with bootstrap and a total of coding.

Related

I can't link external css into HTML

Here is the error now showing in browser console, anyone please explain what is this?this is a screenshot of html file
I'm building a web page using Bootstrap, I have added Bootstrap CSS and my CSS into "head" tag. Here is the code-
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
Here is what I have added into my CSS-
.mybanner{
background-color: rgb(12, 8, 5);
text-align: center;
}
.mybg{
background-color: rgb(161, 86, 86);
}
.other{
width: 30px;
height: 30px;
}
Here is the whole code-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-light navbar-expand-lg mybg" style="background-color: #3be79f;">
<a class="navbar-brand" href="#" style="color: rgb(141, 7, 7); font-size: 25px; font-family: 'Permanent Marker', cursive;"> Stiffy </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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beauty</a>
<a class="dropdown-item" href="#">Health</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Lifestyle</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Your Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--slideshow starts-->
<div class="fluid-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Photography</h3>
<p>It is always so much fun!</p>
</div>
</div>
<div class="carousel-item">
<img src="../Image\zombie-945622.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Ghost</h3>
<p>Thank you, Mr. Demon</p>
</div>
</div>
<div class="carousel-item">
<img class="img-1" src="../Image\zombie-979358.jpg" alt="New York" style="width:100%; height: 60%;">
<div class="carousel-caption">
<h3> Oops.</h3>
<p>Ghosts are best.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--slideshow ends-->
<!-- Banner starts-->
<div class="fluid-container">
<div class="row" class="mybanner" style= "background-color: #3be79f;
text-align: center;"
>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
24*7 Services
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Cheaper in price
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Deliver ASAP
</div>
</div>
</div>
<!-- Banner ends-->
<!-- other stuff-->
<div class="other">
<img src="../Image\bride.jpg">
</div>
<!-- JQuery,JS, BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have added class properly, don't know why it's not working. Please help me.Thank you.

You are in the folder of html, you should use .. to go out of the folder and then tell to what folder to ender /CSS/ and then to select the file style.css
Use this:
<link rel="stylesheet" href="../CSS/style.css" />

Please swap this:
<link rel="stylesheet" href="CSS\style.css" >
To this:
<link rel="stylesheet" href="../CSS/style.css" >
EDIT: As #renaldo-balaj explains you're in a HTML folder so to access the CSS folder you would need to use ../ to hop up one level in your folder directory then go into CSS then grab styles.css
Also to add you used the wrong \
EDIT 29/11:
Ok I have removed the HTML not needed to show that this works properly.. You must be implementing the solution wrong. You have 2 answers that are correct and this post should be closed due to lack of context and over duplciation of 100 other posts around this relative path issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
first web page using bootstrap
</title>
<!--Our CSS-->
<link rel="stylesheet" href="../CSS/style.css" >
</head>
<body>
</body>
</html>
body {
background-color: black;
}
Folder Structure:
Project
│
│
├───CSS
│ style.css
│
└───HTML
index.html
So here I will try explain further your issue.
\ backslashes are not used in filepaths, as per #birspider's answer which shows the HTML validator state that.
You have your index.html in a HTML folder which isn't normal for a static website so becuase of this unless your CSS file is in the same directory to that HTML file then you need to use the ../ to hop up out of the HTML folder, then /CSS to go into your CSS folder and then /style.css to grab the style.css file and serve it.
Again your DevTools console would of advised you of where it was trying to look and you should be able to debug from there.
Please close this post and accept a answer.
Image from my browser showing that background-color: black; worked from the style.css file: https://ibb.co/ys1Kvvt

your html markup is invalid:
try https://validator.nu/ and you will find (among others)
Error: Bad value CSS\style.css for attribute href on
element link: Backslash ("\") used as path segment delimiter.
At line 20
<link rel="stylesheet" href="CSS\style.css" >
---
Error: Bad value ../Image\unsplash.jpg for attribute src on
element img: Backslash ("\") used as path segment delimiter.
At line 84
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">↩
---
Error: Duplicate attribute class.
At line 124
ass="row" class="mybanner" sty

How to attach a div to a collapsible navbar

Basically I have a navbar at the top of the page. This navbar has a collapse functionality, so that the menu is still usable for small screens. I would like to attach a div at the bottom of this collapsible navbar. To be more specific, on the right side of the screen, there would be a red circle which is centered on the border of the navbar.
I am looking for something like this :
enter image description here
The circle is not a button. The collapsible button appears only for small screens (on the right of the navbar)
I have tried many suggestions I found on the Internet. Most of them suggested to give the parent div a relative position and an absolute position to the child div. But it never worked, and the only times it did, it was not responsive.
Here is my current HTML non responsive code
.circle {
position:absolute;
<--top:35px;-->
right:3vw;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top navbar-expand-lg green-background">
<div class="container-fluid">
<-- 80 lines of navbar code including a collapse navbar-collapse div -->
</div>
<div class="circle"></div>
</nav>
So far, the only thing I can do is place the circle for a given size of screen. It is not stable if the screen size changes. It is not with the collapsible mode either.
Thank you very much for your help.
Have a nice day :)

You can calculate it using calc. You can subtract the px from total % according to your requirement .
.circle {
position:absolute;
top: calc(100% - 10px);
right:30px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
<div class="container logo" style="position: relative;">
<a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg' /></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto text-center">
<li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Paketler</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Kampanyalar</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">sss</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Hizmet Noktalari</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>İLETIŞIM</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
</ul>
</div>
<img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
</div>
<div class="circle"></div>
</nav>
</body>
</html>

Try it by giving by adding your element inside of your navbar and add following properties:
.circle{
position:absolute;
z-index: 1001;
right: 35px;
top: 45px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}

Logo gets cut in responsive view

Bootstrap 4
I got the problem, that the Logo in the header gets cut when I watch it in the Chrome developer tools for example in the responsive view Galaxy S5
I think the Logo Container is too big and needs to go after the navbar but I have no clue to do it so.
/* === Navigation ===*/
.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
color: #fff;
font-size: 0.9em;
font-weight: bold;
}
.navbar-dark {
background-color: #2e82b0;
}
.navbar {
min-height: 80px;
}
.navbar>.container {
border-bottom: 1px solid #fff;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 1.4em;
padding-bottom: 1.4em;
}
}
#media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
font-size: 1.2em;
}
}
**CSS**
/* === Header ===*/
.hero-bg {
background-color: #2e82b0;
}
.img-logo {
max-width: 60%;
margin-top: 15%;
margin-bottom: 10%;
}
.line {
border-bottom: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Navigation
============================================================================================= -->
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top py-0">
<div class="container">
<button class="navbar-toggler btn-round" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle">
<span class="icon-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header
============================================================================================= -->
<!-- Header -->
<section id="home" class="hero-bg">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- Scripts
============================================================================================= -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>

Whenever you use the fixed-top class for your navbar, you need to add the appropriate top margin and/or top padding to the container that follows your navbar. And don't use percentages for margin/padding in this case. Use rem units or px instead.
Here's a working example (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top py-0">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg mt-5 pt-5">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo col">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="https://placehold.it/260x130" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
Notice: This code snippet doesn't use any of your custom css and for spacing only the classes mt-5 pt-5 are used in this case.

Header image is getting covered by Bootstrap 's menu

The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">

Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.

The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

Why is Bootstrap overriding my custom CSS?

My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
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">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.

.navbar-fixed-top sets (position:fixed;left:0;top:0;right:0) to your element. so delete this class from your nav tag

add rules to #navbar id or .navbar class to add the padding rules you want to extend the css from Bootstrap in your demo.css file.

If you want to overwrite the bootstrap css property or any other just give "!important"
html, body {
background:#fbf3e8 !important;
}
body {
margin:0 !important;
padding:2em 5px !important;
}

Resources