htmlcsswidth

How to make section element in css to full width

In the image, red circled area is my problem:

enter image description here

Here is the Html/Css.

section {
  height: 100%;
  width: 100%;
  display: inline-block;
}
<section id="aboutSec">
  <div>
    <h1>Here is about Sec</h1>
  </div>
</section>

Solution

  • You either have some margin on the section element, or you have some padding on a containing element. Remember that the browser has a default stylesheet, so if you're not overridding it with a css reset, then there are some styles already present and affecting your layout. I recommend adding the line margin: 0; to your section, and then traversing parents or checking in the dev tools to see if a parent element has a padding that is pushing the layout.