How can I increase the width of an element in HTML when someone hover on that element.
I wrote some code for that animation using CSS but I am not getting the expected result.
Here's what I am getting when I hover on that element:-
image.gif
Here's what I want:-
image
here is my code:-
HTML:-
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="animations/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li><a class="active" href="#home">Home</a></li>
<li>blog</li>
<li>subjects</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
CSS:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("../images/index/header/header.jpg");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li {
float: center;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
}
#subjects_nav li a:hover {
animation-name: subject_animation;
animation-duration: 1s;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/physics.jpg");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/chemistry.jpg");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/maths.jpg");
background-size: cover;
}
#space {
list-style: none;
}
(ANIMATION) CSS :-
#keyframes subject_animation {
from {
width: 80%;
}
to {
width: 90%;
}
UPDATE - 1:-
i used this code in CSS transform: scale(1.2, 1); but it stretch the images and make them look ugly and i only want transformation in x-axis so i used transform: scaleX(1.4); this also stretch the image
Think differently and instead of changing the width change the margin to make them negative values. You can also use transition instead of animation:
By the way there is no float:center, you need to correct this on your code.
Here is the relevant part of the code to show the result:
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border: 3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -30px;
}
#physics_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/1000/");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/800/1000/");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/600/");
background-size: cover;
}
#space {
list-style: none;
}
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
I used a pseudo element, :before, to help with my fixed background image because if not, it would cause my website to scroll slow due to the background-attachment repaint function. I fixed the background image to run smoothly, but now the background image is overflowing throughout the whole document and not staying in the div.
I have tried to use different overflow options and tried putting the hero class that controls the pseudo element on different elements to see if that would help.
https://jsfiddle.net/4prhubwy/
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class = "hero">
<header>
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class = "idkYet">
<div>
<span>hello</span>
</div>
</section>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero{
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before{
background-image: url("/img/header.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body{
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo{
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover{
border-bottom: 2px solid white;
}
.navbar{
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul{
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li{
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover, .menu:hover, .services:hover, .contact:hover{
border-bottom: 2px solid white;
}
.sushiPlatter{
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2{
font-weight: bold;
}
.sushiPlatter a{
margin: 0em 7em;
}
.sushiPlatter a:hover{
opacity: .25;
transition: 1s;
}
section{
height: 100vh;
color: black;
}
.idkYet{
color: white;
display: block;
}
add a background to the rest of the element so it hides the pseudo while scrolling on top of it, section for instance here :
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* selector moved here to be seen */
section {
height: 100vh;
color: black;
background: white;/* rule added , use your own color or img */
}
/* end selector moved */
a {
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero {
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before {
background-image: url(https://i.imgur.com/bs8H4p7.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body {
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo {
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover {
border-bottom: 2px solid white;
}
.navbar {
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul {
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li {
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover,
.menu:hover,
.services:hover,
.contact:hover {
border-bottom: 2px solid white;
}
.sushiPlatter {
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2 {
font-weight: bold;
}
.sushiPlatter a {
margin: 0em 7em;
}
.sushiPlatter a:hover {
opacity: .25;
transition: 1s;
}
.idkYet {
color: white;
display: block;
}
<div class="hero">
<header>
<nav class="navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class="idkYet">
<div>
<span>hello</span>
</div>
</section>
i wrote a code for my navigation bar to stay at fixed position using position: fixed;so that when anybody tried to scroll the page it stay at their current position but i am not getting the desired result.
here is my navigation bar (without changing code):-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
but when i add position: fixed; in my coding like :-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
position: fixed;
}
my navigation bar moves to bottom of the page:-
but if i remove bottom: 0; from my code:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
}
or
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
position: fixed;
}
in both the cases my navigation bar moves to this position:-
and also i cannot remove position: absolute; from my code as it also changes the position of my navigation bar:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
right: 0;
}
what i want ?:-
here is my code:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
Use fixed, z-index and calculate the postion using top and not bottom. The value should be the height of the header minus the height of the navbar:
run the snippet full width as it won't work on the reduced size since the header is big
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: fixed;
right: 0;
top: 300px;
z-index:999;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
I am creating a webpage and the css and html are fairly straightforward. However, in Chrome, and only on 100% zoom, when I hover over a navbar item a tiny sliver of the container div color stays the same. If I change the zoom level or use another browser this effect is not present. Any thoughts: Code is below.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Site Title</title>
</head>
<body>
<div class="img_div" id="visible_div1">
<img src="images/logo_transparent.png" class="logo_img" id="img1"/>
</div>
<div class="nav_bar_div" id="visible_div2">
<ul class="nav_bar" id="ul1">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="main_div" id="visible_div3">
</div>
</body>
<footer>
Footer Text
</footer>
CSS:
body{
background-color: #5d5953;
font: arial;
color: white;
}
.img_div{
position: relative;
margin: auto;
height: 10%;
overflow: hidden;
background: white;
width: 60%;
}
.logo_img{
top: 10%;
float: right;
height: 80%;
padding: 0 2% 0 2%;
position: relative;
}
.nav_bar_div{
width: 60%;
background: #ff9900;
margin: auto;
padding: 0;
}
.nav_bar{
list-style-type: none;
margin: auto;
overflow: hidden;
}
.nav_bar > li{
display: inline-block;
margin: 0;
padding: 1%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.nav_bar > li:hover{
background-color: white;
}
.nav_bar > li > a{
display: block;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
font-size: 2em;
margin: 0;
}
.nav_bar > li:hover a{
color: #ff9900;
}
.main_div{
background-color: white;
color: black;
width: 60%;
height: 85%;
margin: auto;
background-image: url("images/welcome_image.jpg");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
footer{
background-color: #ff9900;
font-family: arial;
width: 60%;
margin: auto;
text-align: center;
padding: 0.5% 0 0.5% 0;
}
Example (Chrome):
NavBar Issue In Chrome
Example (IE):
NavBar Correct In IE
I am having trouble centering my ul that contains icons of facebook, twitter, and linkedin. in my page the icons are more towards the right and are not centering. Any help would be greatly appreciated.
body {
margin: 0;
font-family: sans-serif;
}
header {
position: relative;
display: block;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper {
width: 250px;
height: auto;
margin-top: -250px;
}
.selfie {
width: 175px;
height: 175px;
border-radius: 50%;
/*background-image: url(selfie.jpg);*/
background-position: center center;
background-size: cover;
border: 2px solid #6f6f70;
margin: 0 auto;
}
h2 {
color: white;
text-align: center;
}
ul {
list-style-type: none;
text-align: center;
}
ul li {
display: inline-block;
}
.ion-social-facebook {
color: white;
font-size: 32px;
}
.ion-social-twitter {
color: white;
font-size: 32px;
}
.ion-social-linkedin {
color: white;
font-size: 32px;
}
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class="selfie"></div>
<h2>Name</h2>
<ul>
<!--this is what i am trying to center-->
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>
Your centering is working. Just use padding: 0; on the ul to remove the left standard padding of unordered lists.
body {
margin: 0;
font-family: sans-serif;
}
header {
position: relative;
display: block;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper {
width: 250px;
height: auto;
margin-top: -250px;
}
.selfie {
width: 175px;
height: 175px;
border-radius: 50%;
/*background-image: url(selfie.jpg);*/
background-position: center center;
background-size: cover;
border: 2px solid #6f6f70;
margin: 0 auto;
}
h2 {
color: white;
text-align: center;
}
ul {
list-style-type: none;
text-align: center;
padding: 0;
}
ul li {
display: inline-block;
}
.ion-social-facebook {
color: white;
font-size: 32px;
}
.ion-social-twitter {
color: white;
font-size: 32px;
}
.ion-social-linkedin {
color: white;
font-size: 32px;
}
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class="selfie"></div>
<h2>Name</h2>
<ul>
<!--this is what i am trying to center-->
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>