I've noticed that the margins of my page appear differently when comparing the HTML file in the browser to the EJS file. My setup involves Node/Express and Bootstrap 4, with the page initially built using HTML. I aimed for the content to stretch from one side of the page to the other on the HTML version.
Upon inspecting the CSS code, it seems like I specified the width and height as well as setting the margin to zero to achieve the desired effect:
html,body {
height: 100%;
width: 100%;
}
{
margin:0;
}
body {
overflow-x: hidden;
} The corresponding HTML snippet creating a pink band across the screen looks as follows:
<div>
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div> While this arrangement worked perfectly in HTML, converting the same page to an EJS format resulted in a strange white space of about 1.3cm between the div and the edge of the screen. Additionally, the white backgrounds turned into a pale gray shade inexplicably.
Despite not introducing any new CSS styles causing this color shift, the issue only affects EJS files and not the original HTML versions.
No additional external styling is present aside from a messages partial EJS file that abstains from styling information. Each main page such as the homepage or about page should be self-contained in terms of CSS and HTML.
This unexpected gray background remains unexplained, especially considering that Bootstrap 4 functionality appears to be intact following some initial hiccups with dropdown menus resolved by localizing the CSS file instead of relying on a CDN link – but the margin discrepancy persists independently of these changes.