Question 44231 in Html Question posted in
Some basic documentation can be found here.

How to fit a container-fluid to the full screen width – Html

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%);
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search