Hey there, currently working on a HTML site and encountered an issue with centering the page. The code looks like this:
HTML:
<body>
--Rest of code--
</body>
CSS:
body{
width:70%;
margin-left:auto;
margin-right:auto;
}
Unfortunately, this approach doesn't center the page as expected. However, when I modify it to include a page wrap div like this:
<body>
<div class="page-wrap">
--Rest of code--
</div>
</body>
and update the CSS:
.page-wrap{
width: 70%;
margin-left:auto;
margin-right:auto;
}
Everything works perfectly now.
I'm puzzled conceptually why targeting the body in CSS didn't work initially. Is the content under body different from the one enclosed by the div tag?
Similarly, another CSS quirk that baffles me is when styling 'Hello' within the following structure:
<div class="A">
<div class"container">
<p>Hello</p>
</div>
</div>
In order to style 'hello', I have to use
.A .container
whereas using just
.A
doesn't have any effect, even though both .A and .container encompass the same content.
If anyone can shed light on these concepts, I would greatly appreciate it.