0

I have a Next.JS application in which I have a div. I want this div to start at the very top of the page. I have padding and margin for the body, HTML and the div itself set to 0 and yet, it's moved a bit down. I checked every single component, none have padding or margin on them. I don't know what is causing it. Devtools on the body itself

How it looks by default

This is 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 CSS in global

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;
}```

Any help on why it's moved is appreciated!
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Sves100
  • 47
  • 1
  • 7

1 Answers1

0

there are different ways to solve this but iam not sure if its what you want. first one is with float , second is with position

   .wall {
            position: absolute;
            top: 0;
            width: 100vw;
            height: 60vh;
            background-color: #FFF0D9;
          }

     .wall {
            float: left;
            width: 100vw;
            height: 60vh;
            background-color: #FFF0D9;
          }
Arash Seifi
  • 385
  • 1
  • 9
  • right, so while this does work. I am interested in knowing why it doesn't do this automatically, since it should and it works fine on other pages (content being right at the top of the page) – Sves100 Sep 22 '22 at 18:52