I have integrated a Bootstrap jumbotron as the header for my webpage and have my own custom layout.css file. However, not all the styling rules defined for the .jumbotron class seem to be working. Despite setting margin-bottom: 0px;, it does not reflect in the browser's developer tools – not even as strikethrough text. Can anyone suggest a solution to this issue?
index.html: Head section and header with the jumbotron class:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/layout.css') }}" rel="stylesheet">
</head>
<header class="jumbotron container-fluid">
<h1> Catalog App </h1>
<button type="button" class="btn btn-xs btn-default btn-login" onclick="location.href='/login/'">Login</button>
</header>
layout.css: Styling for .jumbotron class:
.jumbotron {
background-color: #195e8c;
margin-bottom: 0px;
padding-top: 2px;
padding-bottom: 2px;
}
Developer Tools: Issue with displaying margin-bottom property:
https://i.sstatic.net/KEC7v.png
I have saved all changes and reloaded the server, but the problem persists. The webpage is hosted on a simple Flask Python server.