css flexbox double right space

Question

Why I have a left indent in this code if I using justify-content: space-between;?

HTML:

    <nav>
      <ul>
        <li><a href="#" title="о проекте">о проекте</a></li>
        <li><a href="#" title="наша команда">наша команда</a></li>
        <li><a href="#" title="как и зачем">как и зачем</a></li>
      </ul>
    </nav>

CSS:

nav {
  width: 60%;
  border: 5px solid red;
  background-color: lightblue;
  /* margin-left: 250px; */
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: nowrap */
  border: 2px solid red;
}

nav ul li {
  border: 2px solid red;
  list-style: none;
  /* width: 100px; */
}

js fiddle https://jsfiddle.net/Lhpvtbeq/2/

You have to override `ul` user agent styles. add `padding: 0;` to `nav ul` selector. — Edvards Niedre, Nov 12 '20 at 14:20

score 0 · Accepted Answer · answered Nov 12 '20 at 14:24

0

normally elements has a default padding and margin try to reset first

*{
padding:0
}

or

add in

nav ul {
padding:0;
}

answered Nov 12 '20 at 14:24

Josh

16
1

Can you please tell me how to disable other default styles? – David Shiko Nov 12 '20 at 14:25
when you start styling in css its best practice to start reset *{margin:0;padding:0;box-sizing:border-box} – Josh Nov 13 '20 at 05:35

css flexbox double right space

1 Answers1