Footer overlapping with a section CSS - html

Im developing a website, and im having trouble in the footer of my page. It is overlapping with the content above it.
CSS:
.downstuff{
padding: .3em;
color: #e9e9e9;
background: #242424;
text-align: end;
}
The thing it is overlapping
HTML:
<div class="downstuff">
<p>Copyright © 2021 Oaknoak | Branded Furniture</p>
<p>Manufacturer | Chennai</p>
</div>
<section class="product-main">
<div class="product-card">
<img src="images/Prince Krish Sofa-set Ash.jpg" alt="Prince Krish" class="product-img">
<h1><a href="princekrish.html">Prince Krish Sofa-Set<a></h1>
<p class="price">₹10000</p>
<p>Prince Krish Sofa Set is made out of premium Jute fabric, Venga wood base and Kurl-on foams</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Eden Corner Sofaa.jpg" alt="Eden Corner Sofa" class="product-img">
<h1><a href="princekrish.html">Eden Corner Sofa<a></h1>
<p class="price">₹10000</p>
<p>Eden Sofa One of the most luxurious models designed for the ultimate comfort and relaxation. </p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Cozy Rope Hammok.jpg" alt="Cozy Rope Hammok" class="product-img">
<h1><a href="princekrish.html"> Rope Hammock<a></h1>
<p class="price">₹10000</p>
<p>The New Oak’N Oak Cotton Rope Hammock, performance and comfort come together to create this Original.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/bonair sofa.jpg" alt="Bonaire Sofa" class="product-img">
<h1><a href="princekrish.html">Bonaire Sofa<a></h1>
<p class="price">₹10000</p>
<p>Bonaire Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Matiz sofa.jpg" alt="Matiz Sofa" class="product-img">
<h1><a href="images/Matiz sofa.jpg">Matiz Sofa<a></h1>
<p class="price">₹10000</p>
<p>Matiz Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/diva sofa.jpg" alt="Diva Sofa" class="product-img">
<h1><a href="princekrish.html">Diva Sofa<a></h1>
<p class="price">₹10000</p>
<p>Diva Sofa One of the most luxurious models designed for the ultimate comfort and relaxation</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Tango sofa.jpg" alt="Tango Sofa" class="product-img">
<h1><a href="princekrish.html">Tango Sofa<a></h1>
<p class="price">₹10000</p>
<p>Tango Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/Noor sofa.jpg" alt="Noor Sofa Malt" class="product-img">
<h1><a href="princekrish.html">Noor Sofa-Malt<a></h1>
<p class="price">₹10000</p>
<p>Noor Sofa One of the most luxurious models designed for the ultimate comfort and relaxation.</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
<div class="product-card">
<img src="images/coral sofa.jpg" alt="Diana Sofa-Coral" class="product-img">
<h1><a href="princekrish.html">Diana Sofa-Coral<a></h1>
<p class="price">₹10000</p>
<p>Diana Sofa One of the most luxurious models designed for the ultimate comfort and relaxation</p>
<p><button class="btn-cart">Add to Cart</button></p>
</div>
</section>
Problem
How its supposed to look like


I made a template for you. This is probably what you want.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Your Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background: #737373;
padding: 1rem;
}
body {
display: flex; /* Use flex */
flex-direction: column; /* Make it flex column this is the trick */
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
margin-bottom: 2rem;
}
.item {
background: yellow;
color: black;
border: 2px solid red;
text-align: center;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 25%;
height: 450px;
}
.downstuff {
margin-top: auto; /* Align element to bottom */
align-self: flex-end; /* Align element to right */
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="downstuff">
<p>Copyright © 2021 Oaknoak | Branded Furniture</p>
<p>Manufacturer | Chennai</p>
</div>
</body>
</html>

Related

Divs not stacking vertically when shrinking browser using flexbox

For whatever reason I can't figure this simple thing out. I've 3 divs that I want to stack when shrinking the browser using flexbox, however I must be missing something. Any insight would be appreciated. I merely want to just make these responsive & have actually done this before but maybe I am going crazy :).
.container {
position: relative;
display: grid;
justify-content: center;
align-items: center;
flex-direction: row;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: grid;
flex-direction: row;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>

Use grid-template-columns: repeat(auto-fill, 150px); to have a CSS grid layout that automatically adapts to the viewport size without needing to hardcode #media rules.
For example:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 1em;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>

Trying to use scroll snapping

So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)
If anyone can help, i would appreciate.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
.home-1 {
height: 100vh;
width: 100%;
background-color: #DBDBDB;
display: flex;
position: absolute;
}
<!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="assets/css/main.css" type="text/css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="home-1">
<div class="menu">
<p>Menu</p>
</div>
<div class="top-links">
About Me
Works
</div>
<div class="right-buttons">
<li onclick="toggleLanguage('English')">En</li>
<li onclick="toggleLanguage('Portuguese')">Pt</li>
</div>
<div class="logo-holder">
<div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
</div>
<div class="bottom-links">
Instagram
Behance
</div>
<div class="email">
<p>alo#scarrard.co</p>
</div>
</div>
<div class="home-2">
</div>
<div class="home-3">
<div class="row">
<div class="column">
<h1>My name is <br>
Sabrina Carrard,<br>
I’m a graphic designer <br>
and passionate <br>
about creating <br>
things and animals. <br>
</h1>
<hr class="solid">
<p>Before we say goodbye, you can get in <br>
touch through my email in Portuguese, <br>
English and French (I’m learning that, <br>
so please, be kind). <br>
</p>
</div>
<div class="column-2">
<p>My formal education was in UTFPR,
where I graduated in graphic design
as well. I started to work still I was in
college, and worked with brands like
ONU, Abril, Red Balloon, Wise up,
Porcelanosa, Medianeira, SEBRAE,
Prata e Arte, Bel Pesce, Universidade
do Intercâmbio e Casa Paraíso
Ecológico. Today I like to consider
myself as a brand and editorial
designer, things I really enjoy
while I’m working on.
</p>
<p>I started to care about art when
I was in school. At the time, I was
obsessed with movies and used to
watch four or five movies a day (but
I was a fine student, I swear). After
that I fell in love with art in
my college days, especially art
history. Today I’m very interested
in the discussion between gender
and art. Female artists, what they
did and their stories, really caught me.
</p>
</div>
<div class="column-3">
<p>
Besides animals, other thing that
is really important to know is that
I’m fascinated by books and
literature. I truly believed that
literature opened my eyes to
important questions such as
human rights and feminism.
So when I’m reading something,
usually they are novels related
to these subjects because it
is something that I care about
</p>
</div>
</div>
</div>
<div class="home-4">
</div>
<div class="home-5">
</div>
<div class="home-6">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
</figure>
<figure class="gallery__item gallery__item--5 ">
<img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
</figure>
</div>
</div>
<div class="home-7">
</div>
<div class="home-8">
</div>
<div class="home-9">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
</figure>
</div>
</div>
<div class="home-10">
</div>
</div>
</body>
</html>

Problem
The following CSS ruleset is wrong:
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
There's no class="body" in the HTML.
The selector only targets .home-10. When you list more than one tag, class, etc., how each part is delimited is very important:
Selector
Target
Declaration
.A {space} .B
.B
Target each .B that is a descendant of an .A
.A , .B
.A OR .B
Target all .A and all .B
.A > .B
.B
Target each .B that is a direct descendant (child) of an .A
.A + .B
.B
Target each .B that is the very next sibling of an .A
.A ~ .B
.B
Target each .B that is a sibling that proceeds an .A
.A.B
.A AND .B
Target all tags that have class="A B"
So if your intention was to target each of those classes, you need to delimit them with a comma:
.home-1, .home-2, .home-3, .home-4, .home-5, .home-6, .home-7, .home-8, .home-9, .home-10 {
scroll-snap-align: start;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght#300&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font: 2ch/1.25 Oswald;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: auto;
}
body {
background: #DBDBDB;
}
h1,
h2,
h3,
h4,
legend,
.byline,
.title {
font-family: Montserrat;
}
.byline {
font-style: italic;
}
header,
section,
footer {
padding: 10px 12px;
background: #DBDBDB;
scroll-snap-align: start;
}
header {
margin: 0 0 20px 0;
border-bottom: 3px inset grey;
}
section {
min-height: 100vh;
}
footer {
margin: 20px 0 0 0;
border-top: 3px inset grey;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
menu {
display: flex;
justify-content: space-around;
width: max-content;
list-style: none;
margin-left: 0;
}
.left,
.right {
display: flex;
align-items: center;
}
li {
margin: 0 5px
}
p {
margin-bottom: 5px;
}
.logo {
max-width: 3rem;
}
.logo img {
display: block;
object-fit: contain;
max-width: 3rem;
}
h1 {
margin-bottom: 10px
}
h2 {
margin-bottom: 5px
}
article {
padding: 5px 8px 8px;
flex: 1;
}
article:first-of-type {
flex: 0.5;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin: 10px;
}
.title {
margin-bottom: 0;
}
.gallery {
scroll-snap-align: none;
}
.gallery figure {
align-self: center;
margin: 10px;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/main.css" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Sabrina Carrard</h1>
<nav>
<div class='left'>
<p class='title'>Menu</p>
<menu>
<li>About Me</li>
<li>Works</li>
</menu>
</div>
<div class='right'>
<menu>
<li><a href="#" class='en lang'>En</a></li>
<li><a href='#' class='pt lang'>Pt</a></li>
</menu>
<figure class="logo">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"></figure>
</div>
</nav>
</header>
<main>
<section class='page'>
<div class="row">
<article class='column'>
<h2>My name is <br>Sabrina Carrard, </h2>
<p class='byline'>I’m a graphic designer and passionate about creating things and animals.</p>
</article>
<article class="column">
<p>My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce,
Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.</p>
<p>I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art
history.
</p>
</article>
<article class="column">
<p>Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.</p>
<p>Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something,
usually they are novels related to these subjects because it is something that I care about.</p>
</article>
</div>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/people?w=320&h=180&random=1&txt=1&txtclr=fc0' alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=2&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=3&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=4&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/people?w=160&h=90&random=1&txt=5&txtclr=fc0" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/things?w=480&h=270&random=1&txt=6&txtclr=fc0' alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=480&h=270&random=1&txt=7&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=720&h=405&random=1&txt=8&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=320&h=160&random=1&txt=10&txtclr=fc0
" alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=11&txtclr=fc0
" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
</main>
<footer>
<p>Before we say goodbye, you can get in touch through my <a href='emailto:alo#scarrard.co'>email</a> in Portuguese, English, and French (I’m learning that, so please, be kind).</p>
<address>
Street<br/>
City, Province/State<br/>
Phone
</address>
</footer>
<script>
/*Always put script right before the </body> end tag*/
</script>
</body>
</html>

3 horizontal divs with margin issue

I am currently building a E-commerce website for practice and the I have the div set up as follows:
.small-container {
max-width: 1080px;
margin: 5px;
padding-left: 25px;
padding-right: 25px;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
background-color: #87bdd8!important;
border-style: solid;
border-color: #1E90FF;
}
.col-4 img {
width: 100%;
border-style: solid;
}
<div class="small-container">
<h2>Merch by Elute FLP</h2>
<div class="row">
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
I'm extremely new to coding and using this platform so I apologize if this looks really bad or if i'm asking a dumb question trying not to rely on tutorials and think for myself but I can't seem to find the answer anywhere. I want the divs to have space and when I add any margin the last div wraps.
Using Atom Framework and unsure why when code run with tool on here shows elements vertical. On Atom when I load the page they are horizontal...

Since you use columns with flex-basis, you have to make the div with class row a flex parent.
I also suggest that you use the columns for grid and style their content separately. In the example below I have created .card elements, which are wrapped inside the columns.
And finally - extremely important: set the box-sizing of the columns to border-box. This means you can set paddings to the columns (instead of margins), which will be counted in the 25% of the column width. This is why it will be better to avoid horizontal margins in this scenario, because this will break the Maths - you want 4 columns with 25% width, but where should the space between them go?
.small-container {
max-width: 1080px;
margin: 5px;
padding-left: 25px;
padding-right: 25px;
}
/* The columns is simplified only to shape the grid */
.col-4 {
flex-basis: 25%;
box-sizing: border-box;
margin-bottom: 50px;
padding: 0 10px;
}
.col-4 img {
width: 100%;
border-style: solid;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* Styling the column content */
.card {
flex-basis: 25%;
padding: 10px;
background-color: #87bdd8 !important;
border-style: solid;
border-color: #1E90FF;
}
<div class="small-container">
<h2>Merch by Elute FLP</h2>
<div class="row">
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
</div>
</div>

Setting position of custom slider controls (CSS)

I've been making my anime website where people can watch anime for free with subtitles (Bulgarian subtitles, since I'm from Bulgaria). Now I'm remaking it from scratch because I have been using a theme but It didn't have much functionality... Now I'm making the slider for the recently added animes but I want it to be a custom one so I'm making.... the slider controls are not in a position, so I tried with float, flex with float, etc.... Here's a picture where it should belong: click to open the image (important)
Here's the HTML:
<div class="recent-anime">
<!-- Title and Controls -->
<div class="title-controls">
<h1 class="title">Наскоро добавни</h1>
<a><i class="fas fa-angle-left"></i></a>
<a><i class="fas fa-angle-right"></i></a>
</div>
<!-- Anime cards -->
<div class="animecards">
<div class="animecard">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
</div>
</div>
And the CSS:
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
}
.title {
font-size: 26px;
}
.animecards {
display: flex;
}
.animecard {
display: block;
float: left;
}
.animecard img {
max-height: 325px;
}
.ml {
margin-left: 15px;
}
.ani {
text-align: center;
}
There's no JS. Still on the HTML and CSS part.
NOTE: This is clean CSS!

justify-content: space-between; on title-controls class will solve the issue shown in image
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
justify-content: space-between;
}

Newbie - Content not staying in container

I'm new to web development, but hoping someone has a quick answer.
Having troubles with this: https://codepen.io/kktotheing/pen/gewXor
I can't seem to get the "data-index" (2-5) to stay in it's container. If you click on each box you'll see the content breaking.
I feel like this is something pretty simple, but can't figure it out!
Thoughts?
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>

If you want your content to have a fixed height, in addition to setting height:300px as you've done, use overflow-y:scroll
To have display:flex on every js-content, in your jQ instead of .show use .css('display','flex') . show() is essentially giving the element the style of display:block. That's why you need to give it a specific display using css()
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
var $buttons = $('.js-button');
var $content = $('.js-content');
var doContent = function(e) {
e.preventDefault();
var $this = $(e.target);
var index = $this.data('index');
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
$buttons.removeClass('js-active');
$this.addClass('js-active');
};
$buttons.on('click', doContent);
#timeline {
margin: 0 auto;
width: 70%;
border: 3px solid black;
}
.content {
margin: 0 auto;
display: none;
height: 300px;
background-color: #ffffff;
border: 1px solid #ccc;
overflow-y:scroll;/* added */
}
.content[data-index="1"] {
display: flex;
}
.content[data-index="2"],
.content[data-index="3"],
.content[data-index="4"],
.content[data-index="5"] {
display: none;
}
.article {
border: 2px dashed blue;
padding: 20px;
}
/*.left {
width: 25%;
}*/
.middle {
width: 60%;
}
.right {
width: 25%;
}
.tmln-img {
max-width: 150px;
}
a.tmln-button {
border: 1px solid green;
color: #151515;
padding: 20px;
text-align: center;
text-decoration: none;
}
a.tmln-button.js-active {
text-decoration: none;
background-color: black;
color: white;
}
.selector {
display: flex;
justify-content: space-between;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>
</section>