Can't figure out where the left and right margin come from

Question

There's a left and right margin for the columned-footer which I did not define or at least I can't find the definition now. So, to get rid of it, I did define margin-left and right to be 0 but that had no effect on it.

I don't get why the two columns are so next to each other and far from the screen borders. Also when the address is a longer text, the margin disappears and it sticks to the screen border! How to remove that annoying margin, and how to make it responsive?

.columned-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(70, 66, 66);
  height: 8rem;
  color: rgb(243, 240, 235);
  width: 100%;
}

.footer-container {
    display: grid;
    gap: 1rem 3rem;
    grid-template-columns: 1fr 1fr;
}

.address {
  float: right;
  display:inline; 
}


.tel {
  float: left;
  display:inline; 
}

<footer>
     <div class="columned-footer">
      <div class="footer-container">
          <div class="address">address
            <div>
            Right around the corner
            </div>
          </div>
          
          <div class="tel">tel
            <div>             8877887788
            </div>
        </div>
      </div>
    </div>
  </footer>

you are using: justify-content: center; – Temani Afif Dec 27 '21 at 12:01 — Temani Afif, Dec 27 '21 at 12:01

Sercan · Answer 1 · 2021-12-27T12:29:43.377

The side spaces are due to the application of the justify-content style. The spaces at the top are due to the align-items style being applied.

You can use the following footer that I edited using Bootstrap 5. By editing the column widths, you adjust both the left and right spacing and the design is responsive.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Footer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>

<body>
  <footer class="bg-dark text-center text-white">
    <div class="container p-4 pb-0">
      <section class="">
        <form action="">
          <div class="row d-flex justify-content-center">
            <div class="col-md-3">
              <div class="form-outline form-white mb-4">
                <div><strong>Address</strong></div>London
              </div>
            </div>

            <div class="col-md-5">
              <!-- Something -->
            </div>

            <div class="col-md-3 col-12">
              <div class="form-outline form-white mb-4">
                <div><strong>Phone</strong></div>+12 345 678 90 12
              </div>
            </div>
          </div>
        </form>
      </section>
    </div>

    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
      @2021
      <a class="text-white" href="https://mdbootstrap.com/">example.com</a>
    </div>
  </footer>
</body>
</html>

Thank you for your helpful answer, but how to achieve responsiveness without bootstrap? — Gigili, Dec 27 '21 at 13:46
You need to use `@media` sections to scroll the columns when the page shrinks; [Responsive Web Design - Introduction](https://www.w3schools.com/css/css_rwd_intro.asp) — Sercan, Dec 27 '21 at 13:49
In general, to make the adjacent items appear one after the other when the page is minimized, add `display: inline-block;` to the container. style is applied. — Sercan, Dec 27 '21 at 13:52
Yeah, I know about `@media` but I need to now what property must be addressed in order for the columns to remain where they are on a big screen. — Gigili, Dec 27 '21 at 15:11
Then you have to write styles in: for example `@media only screen and (min-width: 1440px) {}`. `max-width` and `min-with` are used to apply styles in different situations; [@Media min-width & max-width](https://stackoverflow.com/a/13550716/15032688) — Sercan, Dec 27 '21 at 15:15

score -1 · Answer 2 · answered Dec 27 '21 at 12:11

Do, body {margin: 0} (as this value come from browser-default values for various html-elements.

Good Habit

Whenever, you try to make your own website, or project, you must always make default reset in your main css file. This means:

* {margin:0; padding:0; box-sizing:border-box}

When you don't do this, browser's default CSS applies to your various HTML-Elements that you are using, untill you are overriding them specifically, while writing your CSS.

.columned-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(70, 66, 66);
  height: 8rem;
  color: rgb(243, 240, 235);
  width: 100%;
}

.footer-container {
    display: grid;
    gap: 1rem 3rem;
    grid-template-columns: 1fr 1fr;
}

.address {
  float: right;
  display:inline; 
}

body {background: red; margin: 0;}


.tel {
  float: left;
  display:inline; 
}

<footer>
  <div class="columned-footer">
    <div class="footer-container">
      <div class="address">
        <div>address</div>
        <div>Right around the corner</div>
      </div>
      <div class="tel">
        <div>tel</div>
        <div>8877887788</div>
      </div>
    </div>
  </div>
</footer>

Can't figure out where the left and right margin come from

2 Answers2