Issue where the background color remains the same and does not change

I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS:

body {
background-color: black;
    padding: 0px;
    margin:0px; 
    height: 1500px;
}

However, it doesn't seem to be working as expected. Instead of changing the background color, it is causing the navbar to shift down a few rows inexplicably. What could be causing this unexpected behavior?

index.html

<!doctype html>
<html>
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href=""> <!--tab image-->
<title> Bear Patrol | Home </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <a id="logo" href="index.html">BEAR PATROL</a>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html">HOME</a></li>       
        <li><a href="about.html">ABOUT US</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div><!-- /.navbar-collapse -->
<div>
    <div class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 center hero-unit">
        <h1 id="name">BEAR PATROL</h1>
        <img id="mainPic" src="bp.jpg">
        <div id="bio">
            <h4>Late Night Escorts Anywhere On Campus</h4>
            <h4> Headquarters Located in Whispers </h4>
            <h4>Available 8 PM to 2 AM Every Day</h4>
        </div>
    </div>
</div>

<div id="contact" class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 center hero-unit">
        <a href="contact.html"><h1> REQUEST AN ESCORT!</h1></a>

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

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

main.css

body {
    padding: 0px;
    margin:0px; 
    height: 1500px;
    background-color: black;
}

#img {
    text-align: center;
    height: 300px;
    width: 230px;
}

#mainPic {
    text-align: center;
    height: 300px;
    width: 500px;
    margin: 50px;
}

form {
    margin-left: 176px;
    margin-top: 30px;
}

#title {
    padding-top: 105px;
    text-align: center;
    margin-top: 0px;
    color: white;
    font-size: 60px;
    font-family: helvetica;
}

#logo {
    font-size: 20px;
    font-style: bold;
    margin-top: 28px;
    margin-left: 20px;
    display: inline-block;
    border-style: solid;
    border-width: 5px;
    padding: 10px;
}

#info {
    text-align: center;
    padding-top: 20px;
    color: white;
    font-size: 68px;
    font-family: helvetica; 
}

.hero-input {
    padding: 5px;
    margin: 5px;
    display:inline-block;
}

#navbar-nav {
    padding-left: 150px;
}

#contact {
    opacity: .9;
}

#button {
    background-color: blue;
    float: right;
}

#nav {
    margin-top: 9px;
    margin-right: 20px;
    display: inline-block;
}

.hero-unit {
    text-align: center;
    background-color: blue;
    font-size: 11px;
    margin: 30px;
    padding: 30px;
    line-height: 1.4em;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    box-shadow: 1px 1px 10px #444;
    border-color: #C1C1C1;
    color: white; 
}

li {
    list-style-type: none;
    margin-top: 15px;
    margin-right: 12px;
    display: inline-block;
    font-size: 15px;
    /* color: white; */
}

a:link, a:visited, a:active {
    color: black;
}

a:hover {
    color: blue;
}

::-webkit-input-placeholder {
   font-family: helvetica;
   line-height: 1.8;
   font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: 4px;
  margin-bottom: 30px;
  text-align: center;
}

h4 {
  font-size: 2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

Answer №1

To change the order of css links, follow the example below

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

This setup is functioning correctly http://jsfiddle.net/gtpco6k9/

Within the same selector, main.css takes precedence over bootstrap.min.css

For more information on css priority order, read this article -> here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Browsing the website through http://localhost instead of file:// while utilizing node.js

I am currently in the process of familiarizing myself with node.js. Everything appears to be running smoothly when I access the site from file:///C:/.../myfolder/index.html. The jquery and bootstrap files are located in the directories myfolder/css/ and m ...

Utilizing PHP to create a form via email

I have created this form and I would like to know if it is secure enough. I attempted multiple times to implement a captcha system, but unfortunately, it did not work for me. As I am still a student, please refrain from sending overly complex solutions. Q ...

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

I'm looking to design a button with text positioned beneath an icon using either Bootstrap 5 or CSS. How

Is there a way to create buttons like the ones shown in the examples using Bootstrap 5 or custom CSS classes? Examples: [Set of buttons][1] Notice how some of them function as dropdown buttons. I've searched for examples but most of them only show ...

Vuetify does not support Tailwind CSS styles

Initially, I integrated Tailwind CSS into my project. However, during the development process, I decided to give Vuetify a try. After adding Vuetify along with vuetify-loader, I encountered an issue where Vuetify functionality was working fine but the styl ...

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

Using React.js to create table cells with varying background colors

For my React application, I am working with a table that utilizes semantic ui. My goal is to modify the bgcolor based on a condition. In most cases, examples demonstrate something like bgcolor={(condition)?'red':'blue'}. However, I requ ...

python Chromium process leak initiated by requests-html

My program is experiencing a crash due to a memory leak before it can complete the loop. The script I am using: from requests_html import HTMLSession from bs4 import BeautifulSoup import requests for x in range(9376, 23534): session = HTMLSession() ...

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

Utilizing props to define the background-color of the '&:hover' state

I'm adapting Material UI's Chip component to accept custom values for the colors prop, rather than being limited to "primary" and "secondary". Additionally, I want the chip to exhibit a hover effect when clicked, transitioning to a different colo ...

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

Is there an easy method for customizing scrollbars?

I'm looking to include an "overflow:scroll" in a navigation div, but the default scrollbar on windows is unattractive. Is there a simple way to customize the scrollbar without having to download extra JavaScript libraries, APIs, and so on? ...

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

I used the `MyWindow=window.open` function to display a pop-up window and then navig

On my webpage (http://localhost:8088/hse/public/explorer), I have implemented two buttons: When these buttons are clicked, a new pop-up window will open at (http://localhost:8088/hse/public/explorer/1) onClick="MyWindow=window.open('http://local ...

Height of list items in image gallery does not automatically readjust

I'm facing an issue regarding the height of an li element. Check out this CodePen link for reference. <div class="row fp-gallery"> <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2"> <li> <a href= ...

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...