I have a vertical menu div and a paragraph div each in a separate line but I want them glued beside each other.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I just want the innertext (class="container-men") to be animatedly changed by clicking on each (class="vertical-men")
and also I'd be really grateful if you could give me the Javascript codes for that purpose. thanks a lot!!
There are multiple ways to achieve what you try. CSS-Grid, Flexbox, Float... However the modern techniques are to use either flexbox or css-grid.
Using a CSS-Grid:
You use the container main and change it into a grid layout by applying display: grid;. Then you add a 2 column layout with grid-template-columns: min-content auto;. That way The navbar will consume as much space as declared and the content all remaining space.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
width: auto;
}
main {
margin-top: 25px;
padding: 0 10px;
display: grid;
grid-template-columns: min-content auto;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Using Flexbox:
In this case you use display: flex; on the container (<main>). Then you can use flex-direction: row; to align the 2 elements next to each other. To span the content the remaining width, you can use flex-grow: 1; on the content element.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
flex-grow: 1;
}
main {
margin-top: 25px;
padding: 0 10px;
display: flex;
flex-direction: row;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Related
I made a header, and it was all looking good until I decided to add more text there, because the text went behind the header, and I don't want that to happen. I know that I can just use something like top: 100px on the text in the CSS file, but I wanna know a proper solution to this.
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet", href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
// CSS
.heading {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
I tried using different positions, but I would either have this problem again, or the header wouldn't be touching the side of the website.
Switch the .heading to be position: sticky. This allows it to still take up space don't he page, while staying at the top when the user scrolls.
Margin: You can add margin: -10px; to the .heading to allow it to still touch the edges of the screen. Then add width: calc(100% + 20px); so it still takes up the whole width.
.heading {
top: 0;
left: 0;
position: sticky;
margin: -10px;
width: calc(100% + 20px);
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet", href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
use position:sticky all element have default margin and padding it's better to assign all element margin to 0 by
* {
margin: 0
}
we will get more control when we design or you can add margin:0 to specific class which is having margin
* {
margin: 0
}
.heading {
top: 0;
left: 0;
position: sticky;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
display: block
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active,
a.logo:visited,
a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active,
a.sign_in:visited,
a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active,
a.sign_up:visited,
a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" , href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</div>
</body>
</html>
I wonder why my code not works! I want to center my images on my two circle shape but currently I do not understand why they are not centered despite having set everything right, in my opinion, I hope someone can help me, thanks. This is my code!
with width and height 100% there is no problems, but I would like to leave some space on the sides of the internal images
* {box-sizing: border-box;}
body {
margin: 0;
font-family: "DM Sans", sans-serif;
overflow: auto;
}
button, a {
cursor: pointer;
}
.header {
background-color: #f1f1f1;
width: 100%;
padding: 0.5% 5%;
}
.header-left, .header-right {
color: var(--main-color);
padding: 0 2%;
}
.menu {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.social-button {
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi_img, #github_img {
text-align: center;
width: 100%;
display: inline-flex;
margin: auto;
padding: 2%;
}
.header span, a, button {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<header class="header">
<div class="header-left">
<span id="name" class="name menu">mySite</span>
</div>
<div class="header-right">
<div class="social">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub" height="84%" width="84%">
</a>
<a id="kofi" class="social-button menu" target="_blank" href="https://ko-fi.com">
<img src="https://i.ibb.co/PCyyCY8/kofi.png" alt="kofi" height="84%" width="84%"></img>
</a>
</div>
</div>
</header>
</body>
I can see a small discrepancy of white space between edges of images icons and borders.
Maybe try removing width and height percentages from your HTML and using CSS to apply these sizes, instead.
This stretched the images to fit more centered.
Your icons are collapsing when the screen resizes, as well. Adding a containing div or other semantic tag will keep this from occurring.
Lastly, your #kofi_img and #github_img selectors aren't doing what you may think.
By removing the underscores from each, you will indeed be selecting the images within those anchors!
Here's my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<div class="social">
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
</div>
</body>
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.icon_container {
background-color: coral;
}
.social-button {
background-color: teal;
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi img, #github img {
width: 85%;
text-align: center;
margin: auto;
padding: 2%;
}
Here's a fiddle: https://jsfiddle.net/permalik/0csfnu6L/32/
If you look closely at the Github image you can see that it is not itself absolutely centered - you are bound to get a larger gap at the bottom of the circle than at the top. Here is a blown up screen shot:
I can't see the same problem with the kofi logo
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
Here is the html and the css in a snippet:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</header>
</body>
</html>
The problem is with h1 and nav I set the top and bottom margin to auto and gave the header a height of 100px (105px with the border) and even though margin auto still not working I tried to add
display: block;
but again still no thing happens
All you need to update your header CSS to :
header {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
That fix the problem
-> Please attached following code into your attached files.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
.display-table {
display: table;
height: 100%;
width: 100%;
}
.vertical-content {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Stack</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="display-table">
<div class="vertical-content">
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
The HTML does not work with margin-top or margin-bottom, you need to create a flex display, check this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
For what you want, you need to do this:
display: flex;
align-items: center;
And if you need something else from flex, check the link