Chrome and Opera highlight the entire line when selecting text

HTML & CSS
1

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

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

But Chrome 31 and Opera 18 select the entire line of the page:

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

index.html

<!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

#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

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;
}
2

Hi Fredd, welcome to the forums,

Just a wild guess. Maybe “flex” needs vendor specific prefixes for those browsers?

3

Having added “display: -webkit-flex;” did not change anything in either browsers.

4