I created an app with rail6 and bootstrap 4. The problem i have is that my website doesn't take up the whole screen. There is a lot of white space on the top and the sides. I don't know how to fix this. A live version of the website can be viewed here https://first-blog-001.herokuapp.com/. You will immediately of what I'm talking about.
Here is my html
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body class="d-flex flex-column">
<%= render 'layouts/navigation'%>
<div id="page-content">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
<%= render 'layouts/footer'%>
</body>
Here is my css. I have tried making messing with margin: 0 and making the width 100% but that doesn't seem to be working.
@import 'bootstrap/dist/css/bootstrap';
.navbar {
background-color: black !important;
}
.nav-link{
color: white !important;
}
#logo {
float: left;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-weight: bold;
}
#home-container{
margin-top: 25px;
}
.jumbotron{
background-image: asset-url('jumboCopy.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 425px;
}
/* Sticky Footer Classes */
html,
body {
height: 100%;
margin: 0 auto;
}
#page-content {
flex: 1 0 auto;
background-color: lightgray;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
From the website, apparently, the body has margin causes the issue.
Change margin: 0 to the body should solve the issue, if not, adding !important should be ok.
body {
margin: 0 !important;
}