How to center link below my images, I tried everything. When I use clear:both this helped me, but then my images are in one column and I do not want that. So basically I want bellow every picture centered link/text. I know that this HTML/CSS does not contains links that I wanted to put below images, I deleted everything that can be confusing.
Thanks.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html {
height: 100%;
background-color: #F0FFF0;
}
body {
height: 100%;
width: 100%;
font-size: 100%;
margin: 0;
}
.container {
display: box;
width: 100%;
height: 100%;
margin: 5%;
padding: 0%;
clear: both;
}
.products img {
width: 31%;
height: 31%;
position: relative;
float: left;
display: inline;
margin: 0 2% 3% 0%;
}
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Products</title>
<link rel="stylesheet" type="text/css" href="css/products.css" />
</head>
<body>
<div class="container">
<div class="products">
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
<a href="#">
<img src="images/tunel.jpg" alt="Product name">
</a>
</div>
</div>
</body>
</html>
Here you go:
Don't float the images, float the links.
Make the images display:block and add text-align:center to the links.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html {
height: 100%;
background-color: #F0FFF0;
}
body {
height: 100%;
width: 100%;
font-size: 100%;
margin: 0;
}
.container {
display: box;
width: 100%;
height: 100%;
margin: 5%;
padding: 0%;
clear: both;
}
.products a {
width: 31%;
height: 31%;
position: relative;
float: left;
margin: 0 2% 3% 0%;
text-align: center
}
.products a img {
display: block;
margin: auto;
}
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Products</title>
<link rel="stylesheet" type="text/css" href="css/products.css" />
</head>
<body>
<div class="container">
<div class="products">
<a href="#">
<img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text
</a>
<a href="#">
<img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text
</a>
<a href="#">
<img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text
</a>
</div>
</div>
</body>
</html>
Related
I want to make a simple gallery.
I set up the width and height of li and the img size, but it doesn't fit.
I want to make unified image sizes.
What's wrong with my code?
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
Just define some height and width to image it will start working.
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
height: 200px;
width: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
For some unknown reason I tried to make a gallery using Grid but the footer doesn't show up on this page, I tried on other pages footer works just to find where I'm mistaken?
my HTML and CSS codes:
*{
margin: 0;
align-items: center;
padding: 0 ;
margin-left: auto;
margin-right: auto;
}
/*/****************HEADER/****************/
header img.ab {
width: 35%;
display: block;
text-align: center;
margin-bottom: 25px;
}
header ul {
list-style-type: none;
overflow: hidden;
background-color: #FFA07A;
width: 100%;
text-align: center;
}
header ul li {
display: inline-block;
float: center;
}
header ul li a {
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
li a:hover {
background-color: #1F1300;
}
.photographehead{
text-align: center;
padding-bottom: 100px;
}
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.grid-container {
display: grid;
grid-template-columns: 400px 400px 400px ;
grid-template-rows: 200px 200px 200px 200px ;
grid-gap: 2px;
justify-content: center;
z-index: -999;
}
div img.sadlife{
float: left;
width: 400px;
height: 200px;
object-fit: cover;
padding: 10px;
border-radius: 25px;
}
.grid-container > div {
text-align: center;
padding: 10px 0;
padding-bottom: 200px;
font-size: 30px;
}
.lightbox {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lightbox:target {
display: block;
}
.lightbox span {
display: block;
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
footer.graphfooter{
clear: both;
position: relative;
height: 300px;
margin-top: -10px;
background-color:#A2B29F ;
text-align: center;
line-height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Salah Eddine Laouina</title>
<link rel="stylesheet" type="text/css" href="stylephotographe.css">
</head>
<body>
<header>
<img class="ab"src="logo.png">
<nav>
<ul>
<li> ACCUEIL</li>
<li> OEUVRES</li>
<li> MAKING OF</li>
<li> PRESS AND MEDIA</li>
<li> PHOTOGRAPHIE</li>
<li> CONTACT</li>
</ul>
</nav>
</header>
<div class="photographehead">
<h2 style="margin-top: 10px;">BORN TO SHOOT THE WORLD AROUND ME</h2>
<h6>Artist photographe Marocain</h6>
<br>
<hr>
<p>"La photographie est un instant qui se reflechit pas, suspendue à une fraction de seconds qui laisse à réfléchir."</p>
<address class="author">-Rémy Donnadieu</address>
<br>
<h3> SALAH EDDINE LAOUINA ARTISTE PHOTOFRAPHE MAROCAIN </h3>
</div>
<div class="grid-container">
<div><a href="#p1">
<img class="sadlife" src="photographie/photo1.jpg">
</a>
<a href="#" class="lightbox" id="p1">
<span style="background-image: url('photographie/photo1.jpg')"></span>
</div>
<div><a href="#p2">
<img class="sadlife" src="photographie/photo2.jpg">
</a>
<a href="#" class="lightbox" id="p2">
<span style="background-image: url('photographie/photo2.jpg')"></span>
</div>
<div><a href="#p3">
<img class="sadlife" src="photographie/photo3.jpg">
</a>
<a href="#" class="lightbox" id="p3">
<span style="background-image: url('photographie/photo3.jpg')"></span>
</div>
<div><a href="#p4">
<img class="sadlife" src="photographie/photo4.jpg">
</a>
<a href="#" class="lightbox" id="p4">
<span style="background-image: url('photographie/photo4.jpg')"></span>
</div>
<div><a href="#p5">
<img class="sadlife" src="photographie/photo5.jpg">
</a>
<a href="#" class="lightbox" id="p5">
<span style="background-image: url('photographie/photo5.jpg')"></span>
</div>
<div><a href="#p6">
<img class="sadlife" src="photographie/photo6.jpg">
</a>
<a href="#" class="lightbox" id="p6">
<span style="background-image: url('photographie/photo6.jpg')"></span>
</div>
<div><a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
<div><a href="#p8">
<img class="sadlife" src="photographie/photo8.jpg">
</a>
<a href="#" class="lightbox" id="p8">
<span style="background-image: url('photographie/photo8.jpg')"></span>
</div>
<div><a href="#p9">
<img class="sadlife" src="photographie/photo9.jpg">
</a>
<a href="#" class="lightbox" id="p9">
<span style="background-image: url('photographie/photo9.jpg')"></span>
</div>
<div><a href="#p10">
<img class="sadlife" src="photographie/photo10.jpg">
</a>
<a href="#" class="lightbox" id="p10">
<span style="background-image: url('photographie/photo10.jpg')"></span>
</div>
</div>
<footer class="graphfooter" >
<figure>
<img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%">
<figcaption><span>S.LAOUINA</span></figcaption>
<p>SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN</p>
<p>Copyright 2020 © LAOUINA</p>
</div>
</figure>
</footer>
</body>
</html>
The problem is in some of your anchors ("<a>") in your HTML.
Some of them are not closed, like , for example:
<div>
<a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
Look that the second anchor (id="p7") was left open (without close tag ). Leave tags unclosed can mess with all your document structure.
That problem was repeated in some tags of your HTML. Use a good code editor like VSCode to avoid that kind of error.
The link below is of a codepen with your HTML fixed. You can use a file compare tool like winmarge to see what I've changed.
https://codepen.io/niconeves/pen/ExXdRBG
I would like to align the image links to the center of the page. This is what I have tried so far:
HTML:
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a id="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a id="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a id="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
CSS:
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
#profile-link img{
width: 50px;
}
I cannot for the life of me get them to stay in the center of the page evenly spaced under Contact.
Actually you can achieve that using inline-block.
:root{--contact-bg: white}
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
.profile-link{
display: inline-block;/*just add this*/
}
.profile-link img{
width: 50px;
}
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a class="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a class="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a class="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
#mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808#yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829#gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
Css:
#font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
How it looks like now
You can provide a link for your Yahoo email address using mailto:youremail#address.com.
See: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_mailto
Your snippet of code for that li would then be:
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo Mail"></a>
</div>
alex.matei1808#yahoo.com
</div>
</li>
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}