I’m following a tutorial on Youtube by Traversy Media to build a responsive website
Right around here he adds a top and bottom margin in css at line number on line number 80, which works for him.
But for some reason, even though I’m following the same code, except for the colour, it is not working for me. Why? I even tried giving margin as 200px, it still has no effect.
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
:root{
--primary-colour: #B37A4C;
--secondary-colour: #FFFDDD;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
color: var(--secondary-colour);
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: var(--secondary-colour);
}
h1, h2{
font-family: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
/* Navbar Styling */
.navbar {
background-color: var(--primary-colour);
color: var(--secondary-colour);
height: 70px;
}
.navbar .flex {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.navbar ul{
display: flex;
}
.navbar a{
padding: 10px;
margin: 0, 5px;
}
.navbar a:hover{
border-bottom: 2px var(--secondary-colour) solid;
}
/* Showcase */
.showcase{
height: 400px;
background-color: var(--primary-colour);
color: var(--secondary-colour);
position: relative;
}
.showcase h1{
font-size: 40px;
}
/******* This is not working *********/
.showcase p{
margin: 200px, 0;
}
/* Utility */
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/styles.css" />
<title>Loruki | Cloud Hosting For Everyone</title>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Loruki.</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="docs.html">Docs</a></li>
</ul>
</nav>
</div>
</div>
<!-- Section -->
<section class="showcase">
<div class="container grid">
<div class="showcase-text">
<h1>Easier Development</h1>
<p>Deploy web apps of all kinds, from large scale enterprise APIs to static
websites for individuals. Fill out the form to try a demo of our platform
</p>
<a href="features.html" class="btn btn-outine">Read More</a>
</div>
<div class="showcase-form card">
<h2>Request Demo</h2>
<form>
<div class="form-control">
<input type="text" name="name" placeholder="Name" required>
</div>
<div class="form-control">
<input type="text" name="company" placeholder="Company Name" required>
</div>
<div class="form-control">
<input type="email" name="email" placeholder="Email" required>
</div>
<input type="submit" value="Send" class="btn btn-primary">
</form>
</div>
</div>
</section>
</body>
</html>>Solution :
You have a typo in there, compare these two:
/* wrong */
margin: 200px, 0;
/* corrent */
margin: 200px 0;
There should be no comma.