I want to create a CSS-Card
On the left side should be a image and on the ride side a headline and paragraph.
Furthermore, in the lower section of the right side there should be a profile picture, name and date of the post.
So my question is
How can I prevent the content in the container-article from overlapping the container-card?
My Current State with the CSS-Card
----------
HTML
<!DOCTYPE html>
<html>
<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" />
<meta name="author" content="Ufuk Can Varol" />
<meta name="description" content="Article Card v3" />
<!-- CSS -->
<link rel="stylesheet" href="css/index.css" />
<!-- Font-Family [Manrope]-->
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght#500;700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link
rel="shortcut icon"
type="image/png"
href="assets/images/favicon-32x32.png"
/>
<title>Article</title>
</head>
<body>
<div id="container">
<div class="container-card">
<div class="container-image"></div>
<div class="container-article">
<div class="article-header">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum, officia.
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
vel suscipit impedit accusantium nihil minima asperiores,
exercitationem sapiente ad expedita fugiat. Veritatis sit
voluptatem qui est unde, aspernatur nemo impedit!
</p>
</div>
<div class="article-footer">
<div class="article-footer-author">
<div class="author-image"></div>
<p>
Savannah Garrett <br />
28 Jun 2020
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background-color: aliceblue;
}
#container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
justify-content: center;
align-items: center;
justify-items: center;
align-items: center;
background-color: antiquewhite;
}
.container-card {
width: 800px;
height: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 2fr 3fr;
background-color: aqua;
}
.container-image {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container-article {
width: 100%;
height: 100%;
margin: 0;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
background-color: aquamarine;
}
.article-header {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: bisque;
}
.article-footer {
width: 100%;
height: 100%;
background-color: blueviolet;
}
Remove height: 300px from .container-card. If you set a fixed height it won't expand to fit its child elements.
Related
I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
Well, I want to understand why when I padded "header div" the content comes out of div, for example, if I apply 60% instead of applying 60% within div, 60% of the page applies, I believed that % was applied over the height/width of the parent Can anyone explain it to me? thank you :)
enter image description here
*{
margin: 0;
text-decoration: none;
list-style: none;
}
header{
background-image: url("../img/stock-1.jpeg");
background-position: 50% 25%;
min-height: 650px;
height: 60vh;
}
header nav{
display: flex;
justify-content: space-between;
height: 60px;
}
header nav a img{
width: 15rem;
}
header nav ul{
display: flex;
justify-content: center;
align-items: center;
}
header nav ul li:nth-child(n + 2){
margin-left: 20px;
}
header nav ul li a{
color: black;
}
header div{
background-color: aqua;
display: flex;
padding-top: 60%;
flex-direction: column;
align-items: 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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<nav>
<img src="assets/img/logo_black.png" alt="Logo">
<ul>
<li>Blog</li>
<li>Vídeos</li>
<li>Descubre</li>
</ul>
</nav>
<div>
<h1>Descubre nuevos lugares en los que aventurarte</h1>
<input type="text" placeholder="Buscar lugares...">
</div>
</header>
<main>
<section>
<h2>Últimos posts</h2>
<article>
<img src="assets/img/last-posts-1.jpeg" alt="">
<h3>Subiendo el Himalaya</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi earum neque libero officiis reprehenderit repudiandae placeat soluta deserunt harum qui. Fugit, in non repudiandae mollitia nemo tenetur explicabo a sequi?</p>
</article>
</section>
</main>
</body>
</html>
*fill text because it tells me that my pubication contains too much code *fill text because it tells me that my pubication contains too much code
If you want to just move the contents of a div down by 30% of the container's height, then you can use position: relative and top: 30% on a wrapper around the contents. Like so:
.container {
background-color: red;
height: 200px;
}
.contents {
background-color: yellow;
position: relative;
top: 30%;
}
<div class="container">
<div class="contents">
Blah blah blah
</div>
</div>
I've set up a simple responsive HTML/CSS page that could be used as HTML Email and although it's responsive on website, when I try to send it with gmail, it messes everything up. The logos get smaller, the button gets no style whatsoever. Sometimes when I try to send the email it shows the items in horizontal way and not vertical like I want.
I have tried sending the email with multiple online providers for such service but the code is always wrong, also I have read that inline styling is better and I've tried that as well but still to no avail.
Below is my code
<!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>
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Saira:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: rgb(187, 187, 187);
padding: 10%;
font-family: 'Montserrat', sans-serif;
font-family: 'Saira', sans-serif;
}
.container {
background-color: white;
display: flex;
flex-direction: column;
}
.header {
height: 130px;
display: flex;
align-items: center;
width: 100%
}
#logo {
max-height: 60%;
margin-left: 2vw;
max-width: 100%
}
#banner {
max-width: 100%;
}
.titulli {
display: flex;
justify-content: center;
font-size: 3vw;
}
.teksti {
background-color: rgb(236, 236, 236);
}
p {
margin: 2vw 10vw 2vw 10vw;
}
.butonat{
display: flex;
flex-direction: column;
align-items: center;
margin: 5vw;
}
#butoni{
margin-bottom: 3vw;
font-size: 4vw;
font-weight: bold;
height: 10vw;
width: 30vw;
border:none;
background-color: rgb(255, 230, 0);
border-radius: 10%;
}
.grupiLogot{
display: flex;
flex-direction: row;
}
.logot {
max-width: 7vw;
padding: 0.5vw;
}
.footeri{
color: rgb(255,230,0);
background-color: rgb(27, 27, 27);
display: flex;
flex-direction: column;
align-items: center;
padding: 4vw 0 4vw 0;
}
h4{
margin: 0.2vw;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<!-- <img id="logo" src="logo.png" alt=""> -->
<img id="logo" src="https://i.ibb.co/GtY9kYz/logo2.png" alt="">
</div>
<img id="banner" src="https://i.ibb.co/LtG9PDg/banner.png" alt="">
<div class="titulli">
<h2>20% Off Summer Sale Now!</h2>
</div>
<div class="teksti">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus eos inventore minus
velit, quas fugiat expedita explicabo consequuntur ea enim temporibus nostrum deserunt, veniam,
voluptatum assumenda libero nesciunt ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo tenetur sunt eligendi quae maxime
nesciunt! Iure consequatur ad quaerat.</p>
</div>
<div class="butonat">
<button id="butoni">SHOP NOW</button>
<div class="grupiLogo">
<img src="https://i.ibb.co/XY5W1hV/facebook.png" alt="" class="logot">
<img src="https://i.ibb.co/JdSsCN3/instagram.png" alt="" class="logot">
<img src="https://i.ibb.co/Cv91mdp/twitter.png" alt="" class="logot">
<img src="https://i.ibb.co/j3rdqgk/whatsapp.png" alt="" class="logot">
</div>
</div>
<div class="footeri">
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
</div>
</div>
</body>
</html>
Here are screenshots from how it shows on Iphone: https://imgur.com/a/6ZZEpXt
You need to get familiar with what is supported and what isn't. One service that does this is caniemail.com. Flex, for example, is not supported.
Generally people resort to table layouts due to Outlook desktop on Windows.
There are some versions of Gmail, amongst other email environments, that disregard your <style> section(s), so you do need to inline the styles too.
Search for 'fluid hybrid email' for a basic structure to get you going.
You may need emailresourc.es too for a wide range of information.
Run the snippet below:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: min-content;
}
.container2 {
position: relative;
margin-left: 20px;
width: min-content;
}
.container2::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px red;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
}
.text {
width: 200px;
height: 100px;
}
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
</div>
Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?
One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).
As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 200px;
height: 200px;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.text {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
Without setting width and height:
If you don't want to set width and height you could use display:flex on .container1 element as follow:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 35%;
display: flex;
flex-direction: column;
}
.inner {
background: yellow;
width: 100%;
z-index: -1;
}
.inner img {
width: 100%;
}
.text {
color: #1415FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
<!-- <img src="birthday.png" alt=""> -->
</div>
<div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.
My main h1 and p tags for this page refuses to center. I'm a new and learning and it's probably something simple I've overlooked; however I cant put my finger on it!
I've tried multiple ways to center this (.content and .header, even *) all set to text-align: center; but nothing works. Even *! So there has to be something "blocking" this?
Thank you in advance for any tips you can give!
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
Add margin: 0 auto; to .content to center it - that's the element in which all these texts are wrapped, and it doesn't span the whole window width, so you have to center it.
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
margin: 0 auto;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
.content{ width:100%} add width 100% on .content class
Your problem is that even if your text is centered in your div, your div itself doesn't use all the width available so you end up having a centered text in a misplaced container.
From there, your have 2 solutions to fix your .content CSS:
Center it with a margin: auto;
Expand it so it'll use all the width and you'll be able to align your element in it correctly: width: 100%;
The problem is that you have made the container of the .content element (the .v-header) to be display:flex. This makes the .content element only occupy the space required by its contents (it no longer expands to 100% of container).
So now you need to add justify-content:center to align the whole box to the center.
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
justify-content:center;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>