Remove space between two elements

Question

I got some problems with the position of the arrow-down-icon as there is too much space between the icon-description and the arrow-icon.

nav {
  background-color: #f2f2f2;
  padding: .3em 0;
  border-radius: 7px;
  font-family: "Source Sans Pro";
}
section {
  background-color: #fafafa;
  border-radius: 5px;
  display: inline-block;
  margin-left: .5em;
}
section > h1 {
  margin: .5em .5em 0 .5em;
  display: block;
  font-weight: bold;
  font-size: .7em;
  color: #555;
  padding: 0 .5em;
  background-color: #F2F2F2;
  border-radius: 4px;
}
section > ul {
  list-style: none;
  padding: .25em .25em 0 .25em;
  color: #555;
  margin: 0 0 0 .5em;
  display: inline-block;
}
section > ul > li {
  font-size: .5em;
  margin: .5em 0 0 0;
  display: inline-block;
  width: 4em;
  text-align: center;
  float: left;
  position: relative;
  cursor: pointer;
}
section ul li div i {
  font-size: 3em !important;
}
section > ul > li > div {
  background-color: #fafafa;
  border: 1px solid #fafafa;
}
section > ul > li > div:hover {
  border-color: #98a6ba;
  background-color: #dde4ef;
  outline: none;
}
section > ul > li > ul {
  list-style: none;
  font-size: 2em;
  background-color: #f2f2f2;
  position: absolute;
  top: 4em;
  left: 0px;
  margin: 0;
  padding: .5em 1em;
}
section > ul > li > ul > li {
  white-space: nowrap;
}
.fa-sort-desc {
  font-size: 2em !important;
  color: #B4B4B4;
}
.fa-sort-desc:hover {
  color: #555;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <section>
    <h1>Title</h1>
    <ul>
      <li>
        <div><i class="fa fa-file-o"></i>
          <br>New</div>
      </li>
      <li>
        <div><i class="fa fa-floppy-o"></i>
          <br>Save</div>
        <br><i class="fa fa-sort-desc"></i>
        <ul>
          <li>Subelement 1</li>
          <li>Subelement 2</li>
          <li>Subelement 3</li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

Answer 1

Remove the <br> after <br>Save</div>. If it's still too much, you can also lower the line-height on the arrow only.

EDIT: Also added position:relative; and top:-2px; to the arrow.

nav {
  background-color: #f2f2f2;
  padding: .3em 0;
  border-radius: 7px;
  font-family: "Source Sans Pro";
}
section {
  background-color: #fafafa;
  border-radius: 5px;
  display: inline-block;
  margin-left: .5em;
}
section > h1 {
  margin: .5em .5em 0 .5em;
  display: block;
  font-weight: bold;
  font-size: .7em;
  color: #555;
  padding: 0 .5em;
  background-color: #F2F2F2;
  border-radius: 4px;
}
section > ul {
  list-style: none;
  padding: .25em .25em 0 .25em;
  color: #555;
  margin: 0 0 0 .5em;
  display: inline-block;
}
section > ul > li {
  font-size: .5em;
  margin: .5em 0 0 0;
  display: inline-block;
  width: 4em;
  text-align: center;
  float: left;
  position: relative;
  cursor: pointer;
}
section ul li div i {
  font-size: 3em !important;
}
section > ul > li > div {
  background-color: #fafafa;
}
section > ul > li > div:hover {
  border-color: #98a6ba;
  background-color: #dde4ef;
  outline: none;
}
section > ul > li > ul {
  list-style: none;
  font-size: 2em;
  background-color: #f2f2f2;
  position: absolute;
  top: 4em;
  left: 0px;
  margin: 0;
  padding: .5em 1em;
}
section > ul > li > ul > li {
  white-space: nowrap;
}
.fa-sort-desc {
  font-size: 2em !important;
  color: #B4B4B4;
}
.fa-sort-desc:hover {
  color: #555;
}
.fa-sort-desc{
  line-height: 0 !important;
  position: relative;
  top: -2px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <section>
    <h1>Title</h1>
    <ul>
      <li>
        <div><i class="fa fa-file-o"></i>
          <br>New</div>
      </li>
      <li>
        <div><i class="fa fa-floppy-o"></i>
          <br>Save</div>
        <i class="fa fa-sort-desc"></i>
        <ul>
          <li>Subelement 1</li>
          <li>Subelement 2</li>
          <li>Subelement 3</li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

Answer 2

Remove the <Br> after <br>Save</div> also give "Line-Height" to "fa-sort-desc"

Answer 3

Remove the <br> after <br>Save</div>