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>
Related
Hi I'm new in web dev and i really want to know why in the next code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid black;
}
html {
font-family: "Rubik", sans-serif;
color: #444;
}
.container {
margin: 0 auto;
width: 1200px;
background-color: #107b72;
}
header {
background-color: rgb(31, 210, 103);
/* height: 100vh; */
}
nav:first-child {
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
background-color: green;
}
h1 {
/* value of space scale */
font-size: 52px;
margin-bottom: 32px;
}
p {
font-size: 20px;
line-height: 1.5;
margin-bottom: 48px;
}
.btn:link,
.btn:visited {
font-size: 20px;
font-weight: 600;
background-color: #e67e22;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 16px 32px;
border-radius: 9px;
}
h2 {
font-size: 44px;
margin-bottom: 48px;
}
section {
padding: 96px 0;
background-color: rgb(7, 183, 148);
}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&family=Rubik:wght#400;500;700&display=swap" rel="stylesheet" />
<header>
<nav class="container">
<div>LOGO</div>
<div>NAVIGATION</div>
</nav>
<div class="container">
<h1>A healthy meal delivered to your door, every single day</h1>
<p>
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
</p>
Start eating well
</div>
</header>
<section>
<div class="container">
<h2>Some random heading</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
consequuntur deserunt maiores nihil ipsum.
</p>
</div>
</section>
codepen
https://codepen.io/kimo-007/pen/WNymqgr
my containers (.containers) are taking like only the width of the viewport, as we move to the right side we can see that the child elements (ones that i centered with margin: 0 auto;) are overflowing, this ones have a fixed width in order to center them. But i really don't understand why the containers stays like in that width, the one of the viewport, why not go all the way and occupy the same as the child elements width?, so this ones are block elements and in the dev tools marks also the complete body with this width, so i didn’t provided any fixed one for this element, so the block elements take 100% of the viewport width? so can you clarify me why this behavior, please!!!!
I really want to understand the behavior behind this html and css visualization on the viewport
You need to add another property max-width:100% in .container like below:
.container {
margin: 0 auto;
width: 1200px;
max-width:100%;
background-color: #107b72;
}
See the example below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid black;
}
html {
font-family: "Rubik", sans-serif;
color: #444;
}
.container {
margin: 0 auto;
width: 1200px;
max-width:100%;
background-color: #107b72;
}
header {
background-color: rgb(31, 210, 103);
/* height: 100vh; */
}
nav:first-child {
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
background-color: green;
}
h1 {
/* value of space scale */
font-size: 52px;
margin-bottom: 32px;
}
p {
font-size: 20px;
line-height: 1.5;
margin-bottom: 48px;
}
.btn:link,
.btn:visited {
font-size: 20px;
font-weight: 600;
background-color: #e67e22;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 16px 32px;
border-radius: 9px;
}
h2 {
font-size: 44px;
margin-bottom: 48px;
}
section {
padding: 96px 0;
background-color: rgb(7, 183, 148);
}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&family=Rubik:wght#400;500;700&display=swap" rel="stylesheet" />
<header>
<nav class="container">
<div>LOGO</div>
<div>NAVIGATION</div>
</nav>
<div class="container">
<h1>A healthy meal delivered to your door, every single day</h1>
<p>
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
</p>
Start eating well
</div>
</header>
<section>
<div class="container">
<h2>Some random heading</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
consequuntur deserunt maiores nihil ipsum.
</p>
</div>
</section>
i'm not sure to understand your question, but if you want a full width container why you write "width:1200px" to your container" ?
.container {
margin: 0 auto;
width: 1200px;
background-color: #107b72;
}
Remove the fixed width, and your div take all the size who need
You don't need to precise them
.container {
margin: 0 auto;
background-color: #107b72;
}
Hi,
Because you mentioned 1200px as a fixed width for containers;
use this
.container {
margin: 0 auto;
width: 100%;
background-color: #107b72;
}
I am currently trying to add a red border to the top of a new section of a web page. I currently already have the first section I want done, but need to differentiate each section using a red border. I have provided an image / code to show you what I mean. If anyone can help that would be great!
Note: I am currently using an image from my own folder, so the CSS File url() will not show up for you if you try running the snippet.
/* Google Fonts */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap');
/* Global */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}
/* Banner Section */
.banner {
width: 100vw;
min-height: 55vh;
background: url(./images/HERO\ 1.jpg) no-repeat;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: bottom;
}
.content {
width: 90%;
text-align: center;
}
.content .title {
color: #de041c;
font-size: 65px;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
margin-bottom: -20px;
}
.content .subTitle {
color: #fff;
font-size: 42px;
font-weight: 600;
text-transform: uppercase;
}
.content .sentence {
color: #fff;
font-size: 16px;
margin: 30px 0 0 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assessment</title>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="banner">
<div class="content">
<div class="title">Lorem Ipsum</div>
<div class="subTitle">Dolar sit amet aran</div>
<div class="sentence">Rerum quas delectus non ab eveniet nihil, eaque tempora incidunt blanditiis, molestias
sit,
unde id? Tempora eius illo labore officiis quis quae.</div>
</div>
</div>
<div class="section-2">
<section>
</section>
</div>
</body>
</html>
Use border-top property for your second section
.section-2 {
border-top: 40px solid red;
}
This is the code
* {
margin: 0;
padding: 0;
background-color: rgb(189, 189, 189);
}
#nav-bar {
position: fixed;
top: 0px;
width: 100%;
}
ul {
list-style-type: none;
float: right;
margin-top: 40px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: rgb(196, 14, 14);
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover {
background-color: white;
color: black;
}
ul li.active a {
background-color: white;
color: black;
}
.logo img {
float: left;
width: 150px;
height: auto;
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
.logo {}
.main {
max-width: 1200px;
margin: auto;
}
.form-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
position: absolute;
top: 40%;
left: 49%;
transform: translate(-50%, -50%);
}
.title h1 {
font-size: 70px;
}
.details {
position: absolute;
top: 300%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="main">
<header id="header">
<div class="logo">
<img id="header-img" src="images/logo.png" alt="A tree">
</div>
<nav id="nav-bar">
<ul>
<li class="active">Home</li>
<li><a href>Details</a></li>
<li><a href>About</a></li>
</ul>
</nav>
<div class="title">
<h1>THE GAZETTE</h1>
</div>
<div class="form-div">
<form id="form">
<input type="email" required id="email" placeholder="Please enter your email adress" size="30">
<input type="submit" id="submit">
</form>
</div>
</header>
</div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur atque nesciunt nam porro corporis dicta officiis asperiores officia, deleniti vitae. Ipsa dolorum minima voluptatem ex corporis laboriosam veritatis mollitia eum.</p>
</div>
</body>
</html>
So when I change the .logo img top 3em or 4em the logo no longer be cropped. But it doesn't align with the nav-bar so it becomes a little farther from the top.
The other problem is because I made * margin, padding 0 all the things I add later go on top and I have to adjust them. How can I make it so it will continue to scroll down.
I want the background to be rounded at the left hand side (i.e the red background curved and occupying the full left side of the parent div) and it isn't. I can't seem to figure out why this is the case.
.body {
background: #e7e7e7e7;
font-family: "Muli", sans-serif;
}
.course {
/*only takes
/*padding adding to the existing container*/
display: flex;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
border-radius: 10px;
background-image: #fff;
position: absolute; /*this makes it stuck to the document body or the nearest ancestor which has a parent. When you scroll it's still all good. */
width: 700px;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%
); /*this is RELATIVE to the actual elements size. We moved down from doc by 50%, so now need to move up by 50% to balance out. */
/*ALT: width: 70%;
left: 15%; */
max-width: 100%;
overflow: hidden;
outline-style: none;
}
h6 {
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 3px;
}
h2 {
margin-top: 10px;
letter-spacing: 1px;
}
.preview {
background: #e40046;
color: #fff;
padding: 30px;
width: 250px;
position: relative;
outline-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Card UI design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* box-sizing: border-box; CAN ALSO EDIT SIZE LIKE THIS*/
}
</style>
</head>
<body class="body">
<div class="container">
<div class="course">
<div class="preview">
<h6>Course</h6>
<h2>Web Development</h2>
View All Chapters
</div>
<div class="info">
<div class="progress-wrapper">
<div class="progress">
<span class="progress-text">8/9 Challenges</span>
<h6>Chapter 4</h6>
</div>
<h2>JAVASCRIPT, HTML & CSS</h2>
<p class="p-trunc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
autem culpa architecto dolores quibusdam deleniti pariatur
corporis, voluptatum ipsa explicabo.
</p>
<button class="btn">Next</button>
</div>
</div>
</div>
</div>
</body>
</html>
The error is with div class and div preview.
.body {
background: #e7e7e7e7;
font-family: "Muli", sans-serif;
}
.course {
/*only takes
/*padding adding to the existing container*/
display: flex;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
border-radius: 10px;
background-image: #fff;
position: absolute; /*this makes it stuck to the document body or the nearest ancestor which has a parent. When you scroll it's still all good. */
width: 700px;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%
); /*this is RELATIVE to the actual elements size. We moved down from doc by 50%, so now need to move up by 50% to balance out. */
/*ALT: width: 70%;
left: 15%; */
max-width: 100%;
overflow: hidden;
outline-style: none;
}
h6 {
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 3px;
}
h2 {
margin-top: 10px;
letter-spacing: 1px;
}
.preview {
background: #e40046;
color: #fff;
padding: 30px;
width: 250px;
position: relative;
outline-style: none;
border-radius: 10px 0 0 10px;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Card UI design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* box-sizing: border-box; CAN ALSO EDIT SIZE LIKE THIS*/
}
</style>
</head>
<body class="body">
<div class="container">
<div class="course">
<div class="preview">
<h6>Course</h6>
<h2>Web Development</h2>
View All Chapters
</div>
<div class="info">
<div class="progress-wrapper">
<div class="progress">
<span class="progress-text">8/9 Challenges</span>
<h6>Chapter 4</h6>
</div>
<h2>JAVASCRIPT, HTML & CSS</h2>
<p class="p-trunc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
autem culpa architecto dolores quibusdam deleniti pariatur
corporis, voluptatum ipsa explicabo.
</p>
<button class="btn">Next</button>
</div>
</div>
</div>
</div>
</body>
</html>
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.