Below is my current code. As you can see, the text inside of the "borderBox" does get separated into columns, as I wanted it to, but the text on the right side does not go all the way to the right, and the middle is not in the middle. According to everything I've read, those two things should happen, but yet they do not.
The "div#columns { display: flex; justify-content:space-between; }" part is what is supposed to do this. Did I not implement it correctly?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<STYLE>
#borderBox {
border: 4px double rgba(9,94,31,0.8);
border-radius: 8px;
width: 555px;
background-color: rgba(0,0,0,.75);
padding: 15px 15px 15px 15px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 18px;
color: #31f55b;
color: rgba(49, 245, 91, 1);
}
div#columns { display: flex; justify-content:space-between; }
</STYLE>
<body BACKGROUND="" TEXT="yellow" BGCOLOR="#000000" LINK="white" ALINK="red" VLINK="yellow" style="background-attachment: fixed;">
<center><br>
<div id="borderBox" class="w3-display-middle">
<div id="columns" class="w3-display-middle">
<div class="w3-display-left">Left Side</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-right">Right Side</div><br>
</div>
</div>
</center>
</body>
</html>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)