CSS fixed navigation crash under div element - html

My navigation is fixed on the top of page. When I scroll down and don't hover over the div element, everything looks all right. However, when try to select some link from my navigation I only select a div element from content under my navigation. The problem is in the div element under it because every time I had selected div element, it crushed my fixed navigation. Please help me if you understand the problem.
My html code is
<html !DOCTYPE>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<head>
</head>
<body>
<div id="navbg">
<nav>
<ul>
<li><center><img src="uploads/nav/pocetna.png"><p>Početna</p></center></li>
<li><a class="select" href="#"><center><img src="uploads/nav/trgovina.png"><p>Trgovina</p></center></a></li>
<li><center><img src="uploads/nav/info.png"><p>O nama</p></center></li>
<li><center><img src="uploads/nav/mail.png"><p>Kontakt</p></center></li>
</ul>
</nav>
</div>
<header>
<img id="logo" src="images/logo4.png">
</header>
<div id="clear"></div>
<section>
<h1>Trgovina</h1>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div id="clear"></div>
</section>
</body>
</html>
and this is my css:
#font-face {font-family: 'Roboto';font-style: normal;font-weight: normal;src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/roboto-normal.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: normal;font-weight: bold;src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: italic;font-weight: normal;src: local('Roboto Italic'), local('Roboto-Italic'), url(../fonts/roboto-italic.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: italic;font-weight: bold;src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(../fonts/roboto-bold-italic.woff) format('woff');}
body{margin:0;padding:0;background:#eee url(../images/bg.png);font-family:Roboto;font-size:14px;font-style:normal;font-weight:normal;color:#777;}
#navbg{width:100%;height:20px;position:fixed;background:#333;}
nav{height:50px;float:right;margin:20px 40px 0px 0px;padding:0px 12px;background:#333;border-radius:0px 0px 10px 10px;}
nav ul, nav li{margin:-10px 0px 0px;padding:0;list-style:none;}
nav ul li{float:left;}
nav ul a{display:block;padding:8px 18px;text-decoration:none;color:#ddd;transition:all 0.3s;}
nav ul a:hover{color:#fff;background:rgba(255,255,255,0.1);}
nav ul a p{margin:4px 0px 0px;text-align:center;}
nav ul a img {width:30px;height:30px;}
.select{color:#a3d45b;background:rgba(0,0,0,0.1);}
header{padding:30px 40px 10px;background:url(../images/headBg.png);border-bottom:4px solid #669b3c;}
#logo{display:block;margin-right:40px;width:230px;}
section{margin:40px;}
h1{font-size:24px;font-weight:100;text-shadow:0px 1px #FFF;}
/* HERE IS PROBLEM */
.okvir{float:left;width:20%;height:19vw;overflow:hidden;}
.okvir a{display:block;margin:0;padding:0;font-size:20px;text-align:center;text-decoration:none;color:#fff;}
.slika {position:static;width:100%;height:19vw;}
.tekst {position:relative;width:80%;height:17vw;margin:-19vw 0 0;padding:8vw 10% 1vw;background:rgba(0,0,0,0.9);transition:all 1s;opacity:0;}
.okvir:hover .tekst {opacity:1;}
#clear{clear:both;}
That looks something like this http://jsfiddle.net/0c5ejr82/


I fixed it! Look: Fiddle
I added:
#navbg {
z-index: 100;
}

Related

Anchor tag goes to the wrong section of a web page

Here's an actual video recording of what the problem is (I'm not trying to advertise in any way): https://www.youtube.com/watch?v=7b38cQ0VGWI
So I'm creating a website just for practice's sake, and everything was going smoothly until I ran into this problem. I have 2 <nav> menus, where the top main nav bar leads one to another page, while the 2nd nav bar leads one to a certain section within the same page. But I'm having problems with the 2nd nav bar. So below is the html I'm using:
<nav class="navbar">
<div class="container">
<ul>
<li>Drama</li>
<li>Comedy</li>
<li>Romance</li>
<li>Action</li>
</ul>
</div>
</nav>
After this is a series of movie picture lists but I'm only going input 2 below as an example:
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
</div>
</div>
As you can see, "John Wick" is within a div tag with an ID of "action", while "Love, Rosie" is within a div tag with an ID of "romance." Now, the "Action" link works fine; it directs the page exactly where the movies within the ID of "action" are. However, when I click the "Romance" link, it doesn't take me to the bottom of the website. Rather, it takes me to the same place as if I clicked the "Action" link.
So basically, the anchor tag isn't working for me even though I made sure to input href="#romance" and also made sure to wrap around the movie "Love, Rosie" within a div tag with an ID of "romance". External links work just fine, only that internal links aren't working as I assumed it would. I also quadruple checked if I had any unclosed div tags, but that wasn't the case.
All of the movies are in the same page.
Below is the CSS (sorry for the disorganization, still working on that):
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow:hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image:url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
box-sizing: border-box;
width: 25%;
float: left;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
And here's the whole html:
<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li>Etc</li>
<li>Animation</li>
<li>LaughTime</li>
<li>Movies</li>
<li>Home</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li>Drama</li>
<li>Comedy</li>
<li>Romance</li>
<li>Action</li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI#._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE#._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM#._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM#._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE#._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk#._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ#._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk#._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ#._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
</div>
</body>
</html>

Below is a working example of the code you provided. The changes are:
added position:relative; to .movies CSS class
added .grid-picture { position:relative; float:left; } to the CSS
added <br style="clear:both;"/> right before each movie category closing </div> tag in order to make sure that the div resizes to match the height of its content (old trick)
Note: I also tidied up your code a bit. You can run the example below to test it.
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image: url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
position:relative;
float:left;
box-sizing: border-box;
width: 25%;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
.grid-picture {
position:relative;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li>Etc</li>
<li>Animation</li>
<li>LaughTime</li>
<li>Movies</li>
<li>Home</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li>Drama</li>
<li>Comedy</li>
<li>Romance</li>
<li>Action</li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI#._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE#._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM#._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM#._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE#._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br style="clear:both;" />
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk#._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ#._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk#._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ#._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>

A link to an anchor only scrolls the page, so if you set a link to an anchor at the bottom of the page the site cannot scroll further than until it reaches the end of its content.
This could be your issue here. You can easily test this if you set the height of the
.grid-picture container to a huge value to make the page scroll beyound the height of the actual content.

I think you are looking for this gallery filter
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 10px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 10px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
<!-- MAIN (Center website) -->
<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> Nature</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('people')"> People</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column nature">
<div class="content">
<img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Mountains" style="width:100%">
<h4>Mountains</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
<h4>Lights</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
<h4>Forest</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://www.w3schools.com/w3images/cars1.jpg" alt="Car" style="width:100%">
<h4>Retro</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://www.w3schools.com/w3images/cars2.jpg" alt="Car" style="width:100%">
<h4>Fast</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="https://www.w3schools.com/w3images/cars3.jpg" alt="Car" style="width:100%">
<h4>Classic</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://www.w3schools.com/w3images/people1.jpg" alt="Car" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://www.w3schools.com/w3images/people2.jpg" alt="Car" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="https://www.w3schools.com/w3images/people3.jpg" alt="Car" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- END GRID -->
</div>
<!-- END MAIN -->
</div>

center ul-nav [boostrap tabs]

I have the following issue:
FULL CODE: jsfiddle
HTML part:
<div class="gc-tabs">
<!-- importar icones em cada aba -->
<ul id="home-tabs-menu" class="nav nav-tabs">
<li class="most-read active">
<a href="#mais-vistas">
<img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-read.svg" />
Mais Vistas
</a>
</li>
<li class="best-rated">
<a href="#melhor-avaliadas"><img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/best-rated.svg" />
Melhor avaliadas
</a>
</li>
<li class="most-commented">
<a href="#mais-comentadas">
<img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-commented.svg" />
Mais comentadas
</a>
</li>
</ul>
<div class="tab-content">
<div id="mais-vistas" class="tab-pane fade in active">
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
</div>
<div id="melhor-avaliadas" class="tab-pane fade">
<h3>Melhor avaliada #1</h3>
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div id="mais-comentadas" class="tab-pane fade">
<h3>Mais comentada #1</h3>
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
</div>
</div>
FULL CODE: https://jsfiddle.net/Lqp1g1ge/
I need the 3 navigation icons to be centered and occupy all the space like that:
Can you help me, please?

Simplest fix, set the CSS like so. Please note I have added my own images since the images provided don't work.
CSS3:
ul#home-tabs-menu{
display:flex;
}
ul#home-tabs-menu li{
display:flex;
align-items:center;
flex-grow:1;
height:100%;
}
ul#home-tabs-menu li>a{
text-align:center;
width:100%;
}
JSFiddle Demo

How to set different shape color when hover state of image?

I have created three images in a column and I set column-count: 3; plus border-width for those three images. Now I need to know about the hover state.
HTML:
<div class="wrap">
<h1 class="content-title"><span>Popular</span></h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="olymbic.html">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
</div>
</div>
When I hover an image, it needs to look like this:
.
And here is my jsfiddle: http://jsfiddle.net/6g7v899q/
May I know, how to do this?
Thanks in advance.

something like this then ?
img{margin:40px;border:25px solid white;}
img:hover{border-left:25px inset gray;border-right:25px outset gray;border-top:25px outset white;border-bottom:25px inset white;}
<img src="http://lorempixel.com/200/200" width="200" height="200" />

Can't move element away from other elements in HTML file?

At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>

You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.

How to crop/cut off an image so it fits the height of the browser window?

I am using the plugin Glide.js on my frontpage, and I have build it up almost like shown on the plugin page. This also means that I wish my slider images to have 100% width, but at the same time I want them to be cropped/cut off at the bottom at the window. Precisely like it is don on the plugin page.
My html code looks like this:
<header class='header'>
<div class='header-wrapper'>
<img class='header-logo' src='/assets/glide-logo-cfe0cb95a81b55ff1e872b0c578c527d.png'>
<nav class='header_nav'>
<ul class='header_nav-wrapper'>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#' id='aboutOpen'>About us</a>
</li>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#'>Create account</a>
</li>
<li class='header_nav-item'>
<form>
<button class='header_nav-item-a header_nav-item-a--btn header_nav-item-a--donate' src='https://www.paypalobjects.com/en_US/i/btn/'>Login</button>
</form>
</li>
</ul>
</nav>
</img>
</div>
</header>
<div class='slider'>
<div class='slides'>
<div class='slide content_article content_article--fast'>
<center>
<img class='slider-img' src='/assets/bg-fast-219ed63d5978022b88ba2389b4f673b6.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 1</h1>
<p class='content_article-p'>
Sub title 1
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 1
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 1</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/fast-img-3d905c8a57b66ef354467a9a0a07d168.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--simple'>
<center>
<img class='slider-img' src='/assets/bg-responsive-07aefbc31666790f38a6e3e3b46f67a8.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 2</h1>
<p class='content_article-p'>
Sub title 2
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 2
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 2</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/responsive-img-662aaea9b8453dc6eac46064fdcc7a56.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--responsive'>
<center>
<img class='slider-img' src='/assets/bg-simple-2d45eb663c4c69d72f66c19eb0cce285.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 3</h1>
<p class='content_article-p'>
Sub title 3
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 3
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 3</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/simple-img-af275d5091063498174655c95fa41079.png'>
</div>
</center>
</div>
</div>
</div>
My css is very simple, but only handles the 100% width stretch:
.slider-img {
width: 100%;
}
So how do I cut off my slider images so they fit the height of the screen?

Here is the CSS
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image */
.crop img{
margin:-20px -15px -40px -55px;
}