0

Spaces to left and right

How can I remove the white gaps to the left and right of this div container?

This is my HTML code:

<div class="container-fluid">
  <div class="centered"><h1>Hello World</h1></div>
  <img
    class="img3"
    src="pictures/1920px-Parliament_of_Hungary_November_2017.jpg"
    alt=""
    style="width: 100%"
  />
</div>

And this is my CSS code:

.container-fluid {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 52px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Declan Davies
  • 71
  • 5
  • 1
    You seem to be overusing absolute positioning. That's a common mistake among new developers. Don't do that unless you're sure you need it. It causes all kinds of problems. If all you need is to center some text, use [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). – isherwood Mar 10 '23 at 14:13

2 Answers2

0

The white gaps to the left and right of the div container are caused by the default padding that is applied to the body element. To remove the white gaps, you can set the margin and padding of the body element to 0.

body {
  margin: 0;
  padding: 0;
}

.container-fluid {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 52px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Kasuni Galahena
  • 1
  • 2
-1

It is common to add CSS code to "reset" the standard behavior causing these issues.

Here is a popular example : https://meyerweb.com/eric/tools/css/reset/

Just try to include the css mentioned in this website in your own code and see if it resolves your issue.

RockyStrongo
  • 99
  • 8
  • CSS resets are a dated and heavy-handed approach in an era of high browser standards compliance. I don't recommend them. Specific element resets or overrides are much better. – isherwood Mar 10 '23 at 14:16