0
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);
body
{
\t background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.desc
{
\t margin-top: 40px;
\t text-align: center;
\t font-size: 100px;
\t color: darkred;
}
.cool
{
\t display: inline-block;
\t width: 100%;
}
.topbar
{
\t position: fixed;
\t top: 0px;
\t width: 100%;
right: 0px;
\t background-color: tomato;
\t text-align: right;
\t height: 50px;
\t z-index: 100;
}
.texti
{
\t margin-right: 15px;
}
.linkur
{
\t border: 1px solid black;
\t padding: 8.5px;
\t margin-right: 10px;
\t text-decoration: none;
\t border-color: transparent;
\t font-size: 1.3em;
\t color: darkred;
}
.linkur:hover
{
\t background-color: lightblue;
\t opacity: 0.7;
}
label
{
\t position: fixed;
\t top: -2000px;
}
.mynd
{
\t position: fixed;
\t top: -50px;
\t left:20px;
}
.navigation
{
\t height: 96%;
\t width: 20%;
\t background-color: tomato;
}
.logo
{
\t position: fixed;
\t top: -100px;
}
.hlid
{
position: fixed;
left: -2000px;
width: 700px;
height: 90%;
z-index: 100;
margin-right: 20px;
}
.main
{
\t position: relative;
\t left: 3%;
\t width: 30%;
\t text-align: center;
\t height: 30%;
\t display:inline-block;
\t margin-right:10px;
\t margin-left:10px;
\t margin-bottom:10px;
}
/*
.main2
{
\t position: relative;
\t right: -3%;
\t width: 30%;
\t text-align: center;
display:inline-block;
\t margin-right:10px;
\t margin-left:10px;
\t margin-bottom:10px;
}
*/
.leikur2
{
\t float: right;
}
.leikjatexti
{
border: 1px solid black;
border-radius: 20px;
text-decoration: none;
margin-bottom: 10px;
padding-top: 5px;
margin-top: 10px;
background-color: tomato;
height: auto;
}
.text2
{
\t text-decoration: none;
\t color: darkred;
}
@media screen and (max-width: 48em){
.mynd2
{
\t height: 150px;
\t width: 70px;
\t margin-top: 10px;
}
.desc
{
\t font-size: 45px;
}
.topbar
{
\t text-align: left;
}
.linkur
{
\t position: fixed;
\t top: -100px;
}
\t
input {
display: none;
}
label,
label {
position: fixed;
top: -27px;
left: 5px;
cursor: pointer;
display: inline-block;
font-size: 18px;
transition: all .15s ease;
font-size: 30px;
z-index: 100;
}
label:hover {
color: darkred;
}
input:checked ~ .hlid {
position: fixed;
left: -50px;
height: 18%;
top: 30px;
transition: all .15s ease;
}
li
{
\t list-style-type: none;
}
.hlidlinkur
{
\t margin-bottom: 20px;
\t margin-left: 10px;
}
.hlidlinkura
{
\t border: 1px solid black;
\t padding: 7px;
\t text-align: center;
\t border-color: transparent;
\t text-decoration: none;
\t color: darkred;
\t font-size: 1.1em;
}
.hlidlinkura:hover
{
\t background-color: lightblue;
}
}<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
var randnum = Math.random();
var inum = 3;
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "img/shi.jpg"
images[2] = "img/halo.jpg"
images[3] = "img/franklin.jpg"
var image = images[rand1]
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <meta charset="utf-8">
\t <title>Main site</title>
\t <link rel="stylesheet" href="Gru_games.css" type="text/css" />
\t
</head>
<body>
<script language="JavaScript">
document.write('<body background="' + image + '" text="white">')
</script>
<nav class="topbar">
<a href="Gru_main.html"><img class="mynd" src="project.png"></a>
<ul class="texti">
<a href="" class="linkur">Games</a>
<a href="" class="linkur">Profile</a>
<a href="" class="linkur">My Cart</a>
</ul>
</nav>
<input type="checkbox" id="toggle">
<label for="toggle"><p>☰</p></label>
<nav class="hlid">
<ul class="navigation">
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<h1 class="desc">Games</h1>
<div class="cool">
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="walking.jpg" alt="Walking Dead" height="152" width="120">
\t \t \t <h1>The Walking Dead</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="portal2.jpg" alt="portal" height="152" width="120">
\t \t <h1>Portal 2</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="blackops.png" alt="Black ops" height="152" width="120">
\t \t \t <h1>COD: Black Ops III</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="borderlands.jpg" alt="portal" height="152" width="120">
\t \t <h1>Borderlands</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="gta.jpg" alt="GTA V" height="152" width="120">
\t \t \t <h1>Grand Theft Auto V</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="tombraider.jpg" alt="TR" height="152" width="120">
\t \t <h1>Tombraider 2014</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="destiny.jpg" alt="Destiny" height="152" width="120">
\t \t \t <h1>Destiny</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="rambo.jpg" alt="Rambo" height="152" width="120">
\t \t <h1>Rambo: The Video Game</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div> \t
\t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="nba2k.jpg" alt="NBA" height="152" width="120">
\t \t \t <h1>NBA 2K16</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="ratchet.jpg" alt="R&C" height="152" width="120">
\t \t <h1>Ratchet&Clank: A crack in time </h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t \t <div class="main">
\t \t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="bloodborne.jpg" alt="Bloodborne" height="152" width="120">
\t \t \t <h1>Bloodborne</h1>
\t \t \t <p>
\t \t \t viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
\t \t \t til að velja rétt og fá rétta endann.
\t \t \t </p>
\t \t </div>
\t \t </a>
\t </div>
\t <div class="main"> \t
\t <a class="text2" href="Gru_login.html">
\t \t <div class="leikjatexti">
\t \t <img class="mynd2" src="evolve.jpg" alt="evolve" height="152" width="120">
\t \t <h1>Evolve</h1>
\t \t <p>
\t \t Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
\t \t í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
\t \t </p>
\t </div>
\t \t </a>
\t </div>
\t
</div>
</body>が、私はボックス（列）が同じ高さに行くように見えることはできませんテキスト
を強調し、私は彼らの上に高さを入れて試してみたと私ドン本当にそれ以上のアイデアはありません。どんなフィードバックも非常によく評価されるでしょう。Ps：いくつかのアイスランド語がコード内にあるかもしれません。
[CSS - Equal Height Columns]の可能な複製（http://stackoverflow.com/questions/2114757/css-equal-height-columns） –