The following code acts as a section allowing a user to scroll through a host of images horizontally. I want to place text undderneath each image . I'm having serious trouble doing this and would be very grateful for any sugestions
<div class="favored" style="background-color: #F8FFFA;overflow-x:scroll; white-space: nowrap;" >
<span>
<img id='<?echo $user_id;?>' src="<?echo$image_path?>">
<caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
</span>
<span>
<img id='<?echo $user_id;?>' src="<?echo$image_path?>">
<caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
</span> <span>
<img id='<?echo $user_id;?>' src="<?echo$image_path?>">
<caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
</span> <span>
<img id='<?echo $user_id;?>' src="<?echo$image_path?>">
<caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
</span>
</div>
Thank you in advance
Flexbox to the rescue!
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow-x: scroll;
overflow-y: hidden;
list-style: none;
padding: 0;
}
ul li {
width: 350px;
text-align: center;
margin: 5px;
}
<ul>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
<li>
<img src="http://placehold.it/200x100">
<p>caption</p>
</li>
</ul>
I see your code . And I exactly know what you want . So I copy this code directly from one of my projects .
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.block-scroller {
width: 100%;
height: 49.5vw; /* It should has it */
clear: both;
margin: 0.5% 0;
}
#scroller {
width: 100%;
height: 39.5vw; /* It should has it */
overflow-x: scroll; /* It make the block scroll */
}
#scrolled-parent {
width: 300%; /* It should has it */
height: 100%;
}
.scrolled {
width: calc(98.5% / 6) !important; /* 98.5% means the 100% - "all of the scrolled blocks margins" and 6 means the six block that we add in html */
height: 100%;
margin: 0 0.125%;
float: left;
background: url(http://placehold.it/600x500) black no-repeat center /cover;
}
.scrolled p {
width: 100%;
line-height: 10vw;
background: rgba(255, 0, 0, 0.7); /* The background color of captions */
color: white;
font-family: sans-serif;
text-align: center;
font-size: 1em;
margin: 0;
}
p#class-title {
width: 100%;
line-height: 10vw;
background: rgba(0, 0, 0, 0.7);
color: white;
font-family: sans-serif;
text-align: center;
font-size: 1em;
margin: 0;
}
</style>
</head>
<body>
<div class="block-scroller">
<div id="scroller">
<div id="scrolled-parent">
<div id="class301" class="scrolled"><p>301</p></div>
<div id="class302" class="scrolled"><p>302</p></div>
<div id="class303" class="scrolled"><p>303</p></div>
<div id="class304" class="scrolled"><p>304</p></div>
<div id="class305" class="scrolled"><p>305</p></div>
<div id="class306" class="scrolled"><p>306</p></div>
</div>
</div>
<p id="class-title">Class</p>
</div>
</body>
</html>
You see it has a nice transparent caption and a group name . Actually I create it for a mobile app interface but I showed the width, height, background-image of the blocks and captions background-color .
TIP : In the body section on line "62" .block-scroller is the parent of the hole codes.
On line "63" #scroller is the div that has the scrolled div in it .
On line "64" #scrolled-parent has the hole images with its captions in it and it is the only div that is scrolling .
And the .scrolled blocks are the images with it captions .
Related
Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.
I'm not 100% sure but I think I need a media query but I am kinda new to formatting CSS.
HTML:
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<br>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" /></a>
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" /></a>
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" /></a>
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" /></a>
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
CSS:
ul.press {
display: table;
width: 100%;
text-align: center;
}
ul.press > li {
display: table-cell;
}
Thanks
What you're looking for can be easily achieved with a few lines of CSS. You can view the CSS I've created (and documented) in this JSFiddle: https://jsfiddle.net/8oLxr7ke/
.press {
display: block; /* Remove bullet points; allow greater control of positioning */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
}
.press li {
display: inline-block; /* Get all images to show in a row */
width: 25%; /* Show 4 logos per row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
In essence, what my code does is:
Set up a rudimentary grid system
Show four logos on large screens
Show two logos on medium screens
Show only one logo on small screens
If you don't want to be restricted to showing a set number of logos, you could do the following:
View on JSFiddle https://jsfiddle.net/5m0whf3k/
.press {
display: table; /* Required for table-cell to work on li's */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
text-align: center; /* Centre align grid items */
}
.press li {
display: table-cell; /* Get all images to show in a row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
#media (max-width: 960px) {
.press {
display: block;
}
.press li {
display: inline-block;
}
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Five</span>
</li>
</ul>
</div>
Important note:
In your HTML code there were closing </a> tags after the <img> tags but no opening <a> tags - this is invalid code. In my example I have removed those for you.
Also, you shouldn't need the <br> between the <h2> and the <ul class="press"> as the press list will be full width and on its own row thanks to the display: block;.
Try adjusting your viewport, if the problem persists, then opt in for media queries
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("header1").classList.toggle("relative");
document.getElementById("button_icon").classList.toggle("change_icon");
}
.wrap{
min-height: calc( 100vh - 86px );
}
a{
text-decoration: none;
color: #666666;
}
header{
text-align: center;
}
header div ul{
}
#first_h1{
color: #000000;
float: left;
margin: 10px 0;
}
#slider{
text-align: center;
border: 1px solid #34c489;
background: linear-gradient(to top, #34c489, rgba(52, 196, 137, 0.30), rgba(52, 196, 137, 0)), url("../img/england_landscape_2-wallpaper-2880x1620.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.boxing{
max-width: 70%;
margin: 0 auto;
}
#img_of_slider{
padding: 0;
margin: 0;
width: 100px;
padding-top: 20px;
}
div header div ul li{
font-size: 1em;
}
/*==================*/
.dropbtn {
color: white;
padding: 16px;
border: none;
height: 56px;
width: 56px;
background-position: center;
background-size: 60%;
background-color: black;
background-repeat: no-repeat;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.5em;
}
.dropdown-content li{
padding: 5px 0;
}
.dropdown-content li a{
color: #fff;
}
.dropdown-content li:hover{
background-color: rgba(64, 247, 171, 0.36);
}
.show {
display: inline;
width: 100%;
position: absolute;
left: 0;
top: 56px;
background-color: #34c489;
}
.relative{
position: relative;
}
.change_icon{
background-position: center;
background-size: 60%;
background-color: green;
background-repeat: no-repeat;
}
#media screen and (min-width: 680px) {
#first_h1{
float: left;
padding-left: 40px;
color: #000000;
margin: 10px 0;
}
.dropdown-content li{
display: inline-block;
padding-right: 20px;
font-size: 1em;
margin: 10px 0;
}
.dropdown-content li a{
color: #000000;
}
.float{
float: left;
width: 28%;
padding: 2%;
}
.clear_fix::after{
content: "";
display: table;
clear: both;
}
#img_of_slider{
width: 250px;
}
.dropbtn{
display: none;
}
.dropdown-content{
display: block;
float: right;
padding-right: 50px;
margin: 0;
}
.dropdown-content li:hover{
background-color: transparent;
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normaliz.css"/>
<link rel="stylesheet" href="css/about.css"/>
<title>Best city guide | Baneh</title>
</head>
<body>
<div class="wrap">
<header id="header1">
<div class="clear_fix boxing">
<h1 id="first_h1">city</h1>
<div class="dropdown">
<button onclick="myFunction()" id="button_icon" class="dropbtn"></button>
<ul id="myDropdown" class="dropdown-content">
<li>home</li>
<li class="active">about</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
</div>
<div style="clear: both"></div>
<div id="slider">
<img id="img_of_slider" src="img/manager.png" alt="city icon"/>
<h1>Best City Guide</h1>
<h3>city</h3>
</div>
</header>
</div>
</body>
</html>
I have a problem with image descriptions. I have HTML structure like this:
<div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;">
<ul style="list-style: none; white-space:nowrap; padding: 0px;">
#foreach($projects as $project)
<li style="display: inline; margin: 0px;">
<a href="{!! url($locale.'/projects/project/'.$project->id) !!}">
<img class="project-cover-image" src="/images/{!! $project->cover_image_name !!}" height="250px" width="auto">
</a>
</li>
#endforeach
</ul>
</div>
It creates a nice looking gallery with horizontal scrollbar. But I need to add descriptions to images that will be placed at the bottom of the pictures covering whole their widths and they should have to be transparent to some degree.
The problem is, whatever I do, I either get description that takes 100% width of the page, or it has width of the text inside it.
I have tried doing it with div, span, different combinations of position absolute/relative, everything and I couldn't manage to make it work.
It should look something like this:
How can I do that?
You have two options (wich produce the same result):
1- A div with a image as background, and a subtitle inside this div;
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverdown {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="image">
<div class="coverdown">Subtitle here with a description.</div>
</div>
2- The image and a subtitle with position:absolute inside a position:relative container;
#container {
width:550px;
height:150px;
position:relative;
}
img {
width:550px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
.subtitle {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="container">
<img src="http://i.imgur.com/HNj6tRD.jpg" alt=img>
<div class="subtitle">Subtitle here with a description.</div>
</div>
use position:relative/absolute
body {
margin: 0
}
.scrollable-content {
padding: 0;
overflow-x: auto
}
ul {
list-style: none;
white-space: nowrap;
padding: 0;
margin:0
}
li {
position: relative;
display:inline-block
}
span {
background: rgba(0, 0, 0, .5);
display: inline-block;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
img {
display: block
}
a {
color: #fff
}
<div class="scrollable-content" data-mcs-theme="dark-thick">
<ul>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/250/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/500/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/400/250">
<span>description</span>
</a>
</li>
</ul>
</div>
basicly, you need relative/absolute as #dippas's answer.
as I advised, use inline-block, so it gets sized by content and will allow easily to position your description.
example below with figure and figcaption.
figure can be wrap in a <a>link displayed inline-block and figure as a block then to avoid a gap underneath.
figure {
display: inline-block;
position: relative;
margin: 0;
}
img {
display: block;
max-height:80vh;height:250px/*snippet demo purpose */
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* makeup*/
background: rgba(0, 0, 0, 0.5);
color: white;
}
/* demo purpose */
div {
white-space: nowrap;
overflow:auto;
}
figure {
white-space: normal;
text-align: center;
}
<div>
<figure>
<img src="http://www.hyperkreeytiv.com/wp-content/uploads/2014/08/IMG_4973.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://4.bp.blogspot.com/-oSEWgZNEopE/TtL8kfGuBzI/AAAAAAAAB6U/b8VSzZaoK3g/s400/action_wolf_1111_photo1.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://1.bp.blogspot.com/-GfOyrk3kZ0w/TewM0BMvbNI/AAAAAAAABM0/KPm3li5Xwko/s1600/alpha+male+Wallpaper__yvt2.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://www.ooyuz.com/images/2015/10/13/1447449028465.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
</div>
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.