Good afternoon! I have an odd issue. I'm creating a webpage just to test my newbie skills. I've created a footer that includes some images (social media icons). These images will absolutely NOT show up in the footer whenever I'm on my desktop. Whenever I'm on my laptop, they show up perfectly.
On my desktop, if I move the icons into the <main> of the html, they show. The moment I put them in my <footer> area, they disappear. Has anyone run into this before? Can someone help?
Here's the HTML code...
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
/*Code for larger screens*/
#media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images\VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links"><a href: "#">Link</a></div>
<div class="nav-links"><a href: "#">2nd Link</a></div>
<div class="nav-links"><a href: "#">3rd Link</a></div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="John#123.com" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp # 7000rpm</li>
<li>Torque: 553 lb-ft # 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images\k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp # 7500rpm</li>
<li>Torque: 1010 lb-ft # 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images\918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp # 8600rpm</li>
<li>Torque: 944 lb-ft # 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<img src="Images/facebook.png" alt="facebook">
<img src="Images/insta.png" alt="insta">
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>
Having tested your code, this is a path issue, but you do have a couple of other errors in your code that need addressing. Your links at the top were posted as <a href:"#" >Link 1</a> etc. ; with a colon instead of an equals sign. Replace ":" with "=" in your links, even if thelinks are blank. Also, in numerous places you have backwards slashes where the slashes should be pointing forwards, as already pointed out. (only some had been corrected). For the purpose of the snippet, I commented out the links to the stylesheet in the head, as the css was in listed separately.
Regarding the path, I entered a path to a facebook icon on a website using the full domain name, and the icon showed. It was rather large, so I added a class for your social icon images to reduce the size. Adjust or remove this as you see fit, depending on the size of your icons. The main issue as I see it regarding the icons not appearing is that you need to correct the file path in your code.
Hope this helps
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
.social-icons a img {
max-width: 26px;
height: auto;
margin: 2px 5px;
}
/*Code for larger screens*/
#media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<!-- <link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&display=swap" rel="stylesheet">-->
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images/VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links">Link</div>
<div class="nav-links">2nd Link</div>
<div class="nav-links">3rd Link</div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="John#123.com" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp # 7000rpm</li>
<li>Torque: 553 lb-ft # 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images/k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp # 7500rpm</li>
<li>Torque: 1010 lb-ft # 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images/918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp # 8600rpm</li>
<li>Torque: 944 lb-ft # 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<img src="http://www.msskincarebeautysalon.com/images/facebook-button-blue.png" alt="facebook">
<img src="Images/insta.png" alt="insta">
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>
Related
I set the buttons to bottom:0; why are they up near the forms? Also I have a second div behind each of the last four boxes it doesn't change background-color?
Also what to do about the video that doesn't show? I have to put in more writing as the post is mostly code, but you could answer that too.
* {
box-sizing: border-box;
}
body {
background-color: green;
}
img {
width: 150px;
height: auto;
}
#header {
position: fixed;
width: 100%;
}
.nav-bar {
width: 100%;
float: right;
background-color: #555;
text-align: justify;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
#nav-bar a.active {
background-color: #740053;
}
.nav-link {
text-decoration: none;
padding: 3px;
display: inline-block;
width: 25%;
color: coral;
}
.ul,
li {
display: inline-block;
}
ul {
border: solid 1px black;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
height: 20px;
}
li {
display: block;
flex: 1 1 auto;
list-style-type: none;
text-align: center;
}
.nav-link:hover {
color: blue;
}
#video-div {
position: relative;
height: 40%;
width: 100%;
top: 100px;
margin-left: 250px;
}
#form {
display: block;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
border-radius: 3px;
background-color: yellow;
border-shadow: 4px;
}
.spacer {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 50px;
}
#email {
margin-top: 50px;
text-align: center
}
#submit {
position: relative;
display: inline;
width: 6em;
top: 30px;
right: 130px;
}
img {
width: 25%;
height: 2vh;
float: left;
}
.box1,
.box2,
.box3,
.box4 {
float: left;
border: 3px solid black;
width: 23%;
height: 300px;
background-color: white;
margin-right: 20px;
overflow: hidden;
}
.innerbox {
width: 100%;
height: auto;
border-bottom: 3px solid black;
display: inline-block;
margin-right: 22%;
text-align: center;
background-color: grey;
}
.btn {
position: absolute;
margin: auto;
bottom: 0;
}
#media (max-width: 100%px) and (min-width: 99%) {}
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome /4.7.0/css/font-awesome.min.css">
<title>Product Landing</title>
</head>
<body>
<header id="header"><img id="header-img" src="https://logos-world.net/huawei-logo/" />
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#forms">
<i class="fa fa-fw fa-home">Form</i></a>
</li>|
<li>
<a class="nav-link" href="#video">
<i class="fa fa-fw fa-home">Resolution</i></a>
</li>|
<li>
<a class="nav-link" href="#email">
<i class="fa fa-fw fa-home">Status</i></a>
</li>|
<li><a class="nav-link" href="#products"><i class="fa fa-fw fa- home"> Pricing</i></a></li>
</ul>
</nav>
</header>
<main>
<div id="video-div">
<video width="300" height="250" controls id="video" src="https://www.youtube.com/watch?v=TfdRmdUc12w&list=RDTfdRmdUc12w&index=1">
</video>
</div>
<div id="forms">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label id="email-label">
<h3>Good Resolution Packages for grabs!</h3> Email:<input id="email" type="email" placeholder="Please input your email:" name="email" required/> <input id="submit" value="Submit" type="submit">
</label>
</form>
</div>
<div class="spacer">
</div>
<section id="products">
<div class="box1">
<div class="inner-box">
<h2>Read</h2>
</div>
</div>
<p>
This is the text that hold the information in the "Read" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box2">
<div class="inner-box">
<h2>Learn</h2>
</div>
<p>
This is the text that hold the information in the "Learn" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box3">
<div class="inner-box">
<h2>Write</h2>
</div>
<p>
This is the text that hold the information in the "Write" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box4">
<div class="inner-box">
<h2>Play</h2>
</div>
<p>
This is the text that hold the information in the "Play" category.
</p>
<button class="btn">Select</button>
</div>
</section>
<footer class="footer"></footer>
</main>
</body>
The buttons are positioned absolute and because you've not created any stacking contexts they're postioned against the viewport. When you scroll they move with the scroll as that's one of the properties of that positioning rule.
The background color does not show in your second div as you've declared it as 'innerbox' in your css file but as 'inner-box' in your html.
As far as your video goes, use the youtube-verified way of embedding from their site e.g. <iframe width="560" height="315" src="https://www.youtube.com/embed/TfdRmdUc12w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> and you'll see it works.
If you want a result like this
enter image description here
Wrong class in styles - in markup class (inner-box), and in styles ( .innerbox )
And then there's this. There are still errors in the styles
1) You don't apply the style to any class, or you haven't copied it
enter image description here
2) That style does not exist ( #form{ border-shadow: 4px}), есть ( box-shadow )**
3) #media (max-width: 100%px) and (min-width: 99%)
Make up your mind here, either 100% or 100px
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to make my navbar hide when I scroll down without using anything other than html and css with minimal js if possible. I can't provide code until later tonight because of project rules.
I figured out that it is very simple, applied in the code below.
<!DOCTYPE html>
<html>
<head>
<!--these are links to the css and little verticle bar icons and also the device width so the navbarand text can work properally at a smaller device width (to an extent)-->
<title>Parker Aucoin</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="a">
<div id="home">
<div id="navbar">
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
} </script>
<div id="navlinks">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>StackOverflow</li>
</ul>
</div>
</div>
<div class="content">
<div class="header">
<p>Parker</p>
</div>
<div class="header2">
<p><span>Aucoin</span></p>
</div>
<div class="header3">
<p>Software Developer</p>
</div>
<div class="gallery-header">
<div id="portfolio">
<h1>Portfolio</h1>
<h3>My GitHub
<a class="github-btn" href="https://github.com/ParkerAucoin/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</h3>
</div>
</div>
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio1.jpg">
<img src="images/portfolio1.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio5.jpg">
<img src="images/portfolio5.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio6.jpg">
<img src="images/portfolio6.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
<div class="spacer">
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio2.jpg">
<img src="images/portfolio2.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio3.jpg">
<img src="images/portfolio3.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio4.jpg">
<img src="images/portfolio4.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
</div>
<div id="contact">
<h1 id="contact-header">Contact</h1>
<table>
<tr>
<th>
<div id="slideshow">
<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slide first">
<img src="images/portfolio1.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio2.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio3.jpg" alt="image1">
</div>
<div class="navigarion-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
</div>
</div>
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if (counter > 3){
counter = 1;
}
}, 5000);
</script>
</th>
</tr>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/background.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fugaz One', cursive;
}
#navbar{
transition: .3s;
z-index: 1;
top: 0;
position: sticky;
width: 100%;
overflow: hidden;
display: inline-block;
padding-top: 40px;
font-family: 'Fugaz One', cursive;
}
#navlinks{
float: center;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
flex: 1;
font-family: 'Fugaz One', cursive;
}
#navlinks ul{
margin-left: 0px;
display: inline-block;
}
#navlinks ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
#navlinks ul a{
color: #fff;
text-decoration: none;
font-size: 15px;
}
#navlinks ul li::after{
content: '';
width: 0;
height: 2px;
background: rgb(255, 100, 52);
display: block;
margin: auto;
transition: .3s;
}
#navlinks ul li:hover::after{
width: 100%;
}
.header{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
padding-top: 1500px;
color: #fff;
text-align: center;
margin: 0;
}
.header p{
font-size: 100px;
}
.header2{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
top: -65px;
margin: 0;
color: #fff;
text-align: center;
padding-top: -30px;
}
.header2 p{
font-size: 100px;
}
.header2 span{
color: rgb(255, 100, 52);
}
.header3{
font-family: 'Fugaz One', cursive;
margin: 0;
position: relative;
color: rgb(163, 163, 163);
font-size: 20px;
text-align: center;
top: -100px;
padding-bottom: 250px;
}
#contact{
position: relative;
color: #fff;
text-align: center;
float: center;
margin: 0;
top: 100px;
}
#slideshow{
top: 20px;
align-items: center;
justify-content: center;
position: relative;
margin: 0;
padding-bottom: 20px;
}
.slider{
width: 200px;
height: 300;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 400px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 200px;
height: 500px;
}
.navigation-manual{
position: absolute;
width: 200px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
.manual-btn:not(:last-child){
margin-right: 10px;
}
.manual-btn:hover{
background: rgb(255, 100, 52);
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
.navigation-auto{
position: absolute;
display: flex;
width: 400px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background: rgb(255, 100, 52);
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: rgb(255, 100, 52);
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: rgb(255, 100, 52);
}
.gallery-header{
font-family: 'Fugaz One', cursive;
text-align: center;
justify-content: center;
align-items: center;
margin: 0;
padding: 20;
}
#portfolio{
color: #fff;
padding-bottom: 50px;
}
#portfolio h3{
color: rgb(163, 163, 163);
}
h3 a{
color: rgb(255, 100, 52);
}
h3 a:hover{
color: rgb(252, 154, 125);
}
#gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 300px;
}
#gallery:hover {
border: 1px solid #777;
}
#gallery img {
width: 180px;
height: 300px;
}
div.desc {
padding: 15px;
text-align: center;
}
th.contact-form{
padding: 16px;
position: relative;
margin: 0;
float: center;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Im trying to remove some whitespace from the bottom of my website.
I tried to adjust the .product overflow to hidden but that didnt work.
image of the whitespace im trying to remove
here's my code:
https://jsfiddle.net/w7zemk0d/
Any help would be appreciated :)
The problem is that the last div is being sized using the height of the elements and assumes that the three plan cards are underneath each other, because of that the "prices" div takes up so much vertical space.
If you remove the absolute positioning and switch to a flex layout for the div, there is no gap at the bottom anymore:
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
#prices{
display:flex;
width: fit-content;
max-width:100%;
margin: auto;
}
.perks {
position: relative;
top: -15px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</div>
</body>
</html>
Your problem is not that you are using absolute positioning, it is because you aren't using absolute positioning. Change relative to absolute on #paid-monthly and #paid-yearly and you should be all set. You'll also need to change top: for both of them as indicated. This will preserve your staggered cards.
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
background-size:cover;
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: relative;
left: 380px;
top: -282px;
}
#yearly-paid {
position: relative;
left: 759px;
top: -565px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: absolute;
left: 380px;
top: 1285px;
}
#yearly-paid {
position: absolute;
left: 759px;
top: 1400px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want to know why the video and the second container don't center in the middle of the page when I gave it the justify-content as you see in the third and fourth container the boxes align in the middle.
I tried everything, from margin to float to grid, but it's not working.
Again sorry for the question but I'm a beginner in this game.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!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 rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
In your CSS for the main identifier, you have flex-direction: column; so you need align-items: center;, not justify-content: center;. Also, I love this resource on Flexbox.
align-items is used for the "cross axis" (if you're adding elements in the column flex direction, the cross axis is the horizontal, and you want your stuff centered horizontally; justify-contents follows the direction axis so it would be trying to center things vertically).
Here's the updated chunk of code in question:
/* ... other styles were above ... */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center; /* don't need this */
align-items: center;
}
/* ... there's more stuff below ... */
Your flex direction is column - so you need to use align-items: center instead.
justify-content: center centers elements in the direction of the flex-flow. align-items aligns flex children on the cross axis of the direction (in this case column).
If your flex-direction was row - align-items: center would vertically center the flex children, since it's the cross axis of the main flex direction.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!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 rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
justify-content:center is working. It's just centering it to the width of the container that's set to 900px
.video-container {
//this width
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
Change width to 100% and it will work fine
I'm doing a project on freeCodeCamp regarding a product placement page. The page is now asking me to fix my #navbar at the top of the viewport. Although this works with position: fixed, after I add the fixed position in CSS, the navbar no longer remains in the centre and moves to the left. If you remove position: fixed;, you'll see what I mean. Why is this happening?
Before adding the fixed position, the navbar was centred (UK spelling ;-}) via margin-left: center;, margin-right: center;. I also have my viewport as 800px wide with auto height (I.e. BBC style).
Important note: There was a logo I created of which I subsequently added to the document, but this does not seem to display (it's hosted by tinypic). If you can't see this logo, it's positioned between the title and the video.
Additional Info:
My video was centred before I made a change. If you could also help me with that, I'd appreciate it. But that's not the main point of this question.
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
}
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {
}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1><hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
I have edited to correct the syntax. As Andriy said, there was a missing '}' after '.nav-button:hover'. I also added 'left: 0;' and 'right: 0;' to '#nav-bar'.
try to add right and left rules with zero value:
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
}
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {
}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1><hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
Your body width is set to 800px; which is a little odd.
So your .navbar width is inherited by this width. Which makes it look not centered because the window is not 800px;
Just add width: 100%; to #nav-bar - a fixed element doesn't have full width by default, you have to define it. (and then the buttons will center within these 100%):
(note: left: 0; right: 0 will bring the same result, since that way the left and right ends are defined, which also results in 100% width)
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
width: 100%;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1>
<hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>