I believe `white-space: pre-wrap;` is causing your issues

Try removing all instances of it (from selectors like the following):

```css
#sidebar ul a {
  white-space: pre-wrap;
}
```





    a {
      text-decoration: none;
    }

    ol,
    ul {
      list-style: none;
    }

    #sidebar {
      width: 230px;
    }

    #sidebar ul {
      margin: 10px 0;
      padding: 0;
    }

    #sidebar li {
      margin: 0;
      padding: 0;
    }

    #sidebar ul a {
      display: inline-flex;
      align-items: center;
      text-align: left;
      border: 1px solid grey;
      padding: 15px 20px;
      width: 155px;
      min-width: 155px;
    }

    #sidebar ul a img {
      margin: 0 15px 0 4px;
      padding: 0;
      height: 21px;
      width: 20px;
    }



    <div id="sidebar">
      <ul>
        <li>
          <a href="#">
            <img src="https://i.imgur.com/UU5GJm7.png" >
            <span>Super Long Account Name</span>
          </a>
        </li>
      </ul>
    </div>

We have a side menu where each list item contains an image and text which should be aligned to the left. It looks fine in Google Chrome, but IE and Edge render differently. I don't mind IE not working (I may try coming back to that at a later date) but Edge needs to work as expected.

I have tried using `justify-content: flex-start` on the `<a>` tag after changing it to `display: flex` which usually works but not in this situation.





    a {
      text-decoration: none;
    }

    ol,
    ul {
      list-style: none;
    }

    #sidebar {
      width: 230px;
    }

    #sidebar ul {
      margin: 10px 0;
      padding: 0;
    }

    #sidebar li {
      margin: 0;
      padding: 0;
    }

    #sidebar ul a {
      display: inline-flex;
      align-items: center;
      text-align: left;
      white-space: pre-wrap;
      border: 1px solid grey;
      padding: 15px 20px;
      width: 155px;
      min-width: 155px;
    }

    #sidebar ul a img {
      margin: 0 15px 0 4px;
      padding: 0;
      height: 21px;
      width: 20px;
    }



    <div id="sidebar">
      <ul>
        <li>
          <a href="#">
            <img src="https://i.imgur.com/UU5GJm7.png" >
            <span>Super Long Account Name</span>
          </a>
        </li>
      </ul>
    </div>




Here's how the code renders in Chrome vs Edge:

[![Screenshot Comparison][1]][1]

Any help would be appreciated


  [1]: https://i.stack.imgur.com/DNteU.png