I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>
Related
Header Row and div do not center in the middle. The line is only at the top. I don't understand where the problem is.
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<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>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Just adjust the padding that you added, which was 16 only at the bottom:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<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>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
If you change this to padding: 8px I think this might be what you want.
I'm creating landing page and I want to separate navbar, text that should be in the middle of wallpaper and text that should at the bottom.
Here is the sandbox:
https://codesandbox.io/s/long-worker-dy31zt?file=/index.html
As you can see, justify-content: space-between is not doing anything on Y axis even-though I made sure it is flex-direction: column. What is the best way to center text in the middle of the background on the landing page? I wanted to do it with flex but it's not working.
You need to use this:
.header-wrap {
height: 100vh;
}
Only after that the .header-wrap will take all the space vertically and your big title and mini title will be placed in the middle of the page.
Here you can check that:
https://codesandbox.io/s/elated-clarke-rkwrj9?file=/styles.css
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: 100vh;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
width: 50vw;
display: flex;
justify-content: space-between;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
space-between isn't doing anything because it doesn't know how much space is there with no defined height. Set the height of the header-wrap to 100vh and it'll work.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
/* ===============
header styles
===============
*/
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
display: flex;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!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>My Website</title>
<link rel="stylesheet" href="nav.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!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>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</body>
</html>
Complete newb here. Third question here.
How do I make the text "A Web Developer"
Come under "Hey I'm Hyde"
and how do I control the space between "A Web Developer" and "Hey I'm Hyde"?
I tried to use a line break but there has to be a better way. Line breaks did not work well.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
#big {
font-size: 65px;
display: inline-block;
color: gainsboro;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
<h1 id="big">
Hey I'm Hyde
</h1><br><br><br>
<br>A Web Developer</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
Link to Fiddle:
https://jsfiddle.net/so2w7rkp/
I wish to gain the ability to put the text "A web developer" underneath "Hey I'm hyde" for future flexbox projects.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#welcome-section p:nth-child(1) {
font-size: 30px;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
Hey I'm Hyde
</p>
<p>
A Web Developer
</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
flex-direction: column;
<section id="welcome-section">
<h1 id="big">
Hey I'm Hyde
</h1>
<small>A Web Developer</small>
</section>
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...