CODEWITHSUNDEEP
htmlcssflexbox
Pranshu Kashyap
Pranshu Kashyap

Reputation: 154

Footer Item aren't getting aligned properly

I am not able to understand why is it happening that there is some left margin in footer 2 item1. Though I haven't given. Please help.

enter image description here

.footer1,
.footer2 {
  width: 100%;
  background: rgb(243, 242, 242);
}

.footer2 ul {
  display: flex;
}

.footer2 ul li {
  list-style: none;
}
<footer>
  <div class="footer1">Item1</div>
  <div class="footer2">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</footer>

Upvotes: 2

Views: 38

Answers (2)

Viira
Viira

Reputation: 3911

This is because the browser's user agent stylesheet adds padding-inline-start: 40px; for ul

setting it to 0 will fix your problem

.footer1,
.footer2 {
  width: 100%;
  background: rgb(243, 242, 242);
}

.footer2 ul {
  display: flex;
  padding-inline-start: 0;
}

.footer2 ul li {
  list-style: none;
}
<footer>
  <div class="footer1">Item1</div>
  <div class="footer2">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</footer>

Upvotes: 1

kyun
kyun

Reputation: 10304

.footer1,
.footer2 {
  width: 100%;
  background: rgb(243, 242, 242);
}

.footer2 ul {
  display: flex;
  padding: 0;
}

.footer2 ul li {
  list-style: none;
}
<footer>
  <div class="footer1">Item1</div>
  <div class="footer2">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</footer>

ul tag has default padding. so If you want to remove some gap in ul, you can set padding: 0.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists

Upvotes: 2

Related Questions