.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8>
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>Testing my web page in different browsers revealed font size discrepancies, particularly with Firefox compared to Chrome. Debug tools showed that the same div element displayed differently in the two browsers, with a significant difference in size.
In a peculiar discovery, refreshing the window after clicking into a modal in Chrome caused the path to change to index.html#, resulting in a layout and div size closer to what was seen in other browsers.
If anyone knows why this discrepancy occurred and how it can be addressed, your insights would be greatly appreciated! Thank you in advance!
Below is a snippet of the code for the header: