A temporary development location of the website can be found here:
Just Cats

Firefox 26 and Internet Explorer 11 highlight the text as expected:
Firefox Text Highlight
Internet Explorer Text Highlight

But Chrome and Opera select the entire line of the page:
Chrome Text Highlight
Opera Tex

Did I do something wrong in the code? Or is this an issue with the browser?

index.html
HTML Code:
<!doctype html>
<html lang="en-gb">
  <head>
    <link href="styles/home.css" rel="stylesheet">
    <link href="styles/main.css" rel="stylesheet">
    <meta charset="utf-8">
    <title>Just Cats</title>
  </head>
  <body>
    <div id="side-space">
      <div id="main">
        <div class="box header">
        </div>
        <ul id="menu">
          <li class="box">Home</li>
          <li class="box">Ranks</li>
          <li class="box">Donate</li>
          <li class="box">Group</li>
        </ul>
        <div id="content-area">
          <div class="box content">
            Server Features:
            <ul>
              <li>Dead Chat</li>
              <li>No Advertisment</li>
              <li>No Forced Team</li>
              <li>Player Ranks</li>
              <li>Round End Scramble</li>
              <li>Voting:
                <ul>
                  <li>Change Level</li>
                  <li>Kick (1 Day Ban)</li>
                  <li>Next Level</li>
                  <li>Restart Game</li>
                  <li>Scramble Teams</li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="box content">
            News:
            <ul>
              <li>Group News Item #1</li>
              <li>Group News Item #2</li>
              <li>Group News Item #3</li>
              <li>Group News Item #4</li>
              <li>Group News Item #5</li>
              <li>Group News Item #6</li>
              <li>Group News Item #7</li>
              <li>Group News Item #8</li>
              <li>Group News Item #9</li>
              <li>Group News Item #a</li>
              <li>Group News Item #b</li>
            </ul>
          </div>
        </div>
        <div id="server-area">
          <div class="box server">
            All Maps<br>
            cp_dustbowl ~ 16 / 24
          </div>
          <div class="box server">
            Donate to make a<br>
            second server happen!
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
home.css
Code:
#content-area {
  display: flex;
  margin-top: 2em;
}

#server-area {
  display: flex;
  margin-top: 2em;
  text-align: center;
}

#side-space {
  margin: 2em auto;
  width: 37em;
}

.content {
  margin-left: 2em;
  width: 100%;
}

.content:first-child {
  margin-left: 0;
}

.server {
  margin-left: 2em;
  width: 100%;
}

.server:first-child {
  margin-left: 0;
}
main.css
Code:
body {
  background-color: #000;
  background-image: url(../images/operation-room.png);
  background-position: center top;
  background-repeat: no-repeat;
  color: #ddd;
  font-family: tf2build-webfont;
  font-size: 1em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

ul {
  margin-bottom: 0;
}

ul#menu {
  display: flex;
  list-style-type: none;
  margin-top: 2em;
  padding-left: 0;
  text-align: center;
}

@font-face {
  font-family: tf2build-webfont;
  src: url(../fonts/tf2build-webfont.woff);
}

#main {
  margin: auto;
  width: 33em;
}

#menu li {
  line-height: 1em;
  margin-left: 1em;
  width: 100%;
}

#menu li:first-child {
  margin-left: 0;
}

.box {
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(1, 1, 1, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 3px 1px #000;
  padding: 10px;
}

.header {
  background-image: url(../images/header.png);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 5em;
}