I am facing an issue with my Next.JS application where a div is not aligning properly at the top of the page. Despite setting padding and margin to 0 for body, HTML, and the div itself, it seems to be slightly off. I have checked all components thoroughly and confirmed that none have additional padding or margin applied. I am unable to identify the root cause of this displacement. https://i.sstatic.net/94grT.png
https://i.sstatic.net/UfwTv.png
The snippet below shows the code in my return statement:
<div>
<Head>
<title>{book.title}</title>
<meta name="description" content={book.description} />
<link rel="icon" href="/favicon.ico" />
</Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Nunito&family=Tinos&display=swap" rel="stylesheet" />
<div className="wall">
<div className="wallContent">
<h1>{book.title}</h1>
</div>
</div>
</div>
)
This is the CSS defined globally:
html {
overflow-x: hidden;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Nunito', sans-serif;
background-color: #217934;
}
* {
box-sizing: border-box;
}
.wall {
width: 100vw;
height: 60vh;
background-color: #FFF0D9;
}
.wallContent {
position: relative;
top: 50%;
color: #FF5C5C;
transform: translate(0%, -50%);
text-align: center;
}