grid columns not using full space of rows, overflowing to next line - html

I am making a layout of cards(images) and want them to be the same size.
I want 4 columns in each row, 1 card per column. Then my next row will have 4 more, so on and so forth.
Instead of my cards taking up the 4 columns of each row, they're only taking up 3, then the 4th card overflows.
My html for this particular page is
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li>Home</li>
<li>Software</li>
<li>Server Room</li>
<li>Our Equipment</li>
<li>Cables and Wiring</li>
<!-- <li>References</li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3">
<!-- placeholder -->
</div>
</div>
</div>
</body>
</html>
my css (sloppy)
body {
height: 100%;
/* width: 100%; */
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg


I added col-12 to your HTML and gave it a flex display on CSS. From here, I suggest making your parent container either larger or reducing some of your margin or padding.
body {
height: 100%;
width: 100%;
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
.col-12 {
display: flex;
}
.row {
padding-right: calc(var(--bs-gutter-x) * 3);
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li>Home</li>
<li>Software</li>
<li>Server Room</li>
<li>Our Equipment</li>
<li>Cables and Wiring</li>
<!-- <li>References</li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3 card">
<!-- placeholder -->
</div>
</div>
</div>
</div>
</body>
</html>
I added the following CSS to fix your padding, you can do it however.
.row {
padding-right: calc(var(--bs-gutter-x) * 3);
}
Click full-page


You are applying margin: .5em; to .card which is also the .col-md-3 throwing off the spacing of the grid. If you need that margin nest the .cards inside the .col-*s:
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
....
</div>
</div>

Related

Why is image not appearing in HTML?

So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image.
This was the youtube video : https://youtu.be/5bMdjkfvONE
I got up to 1:00:0 into the video after that it no longer worked like in the video.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

It's because there are no images at the URL's you are using. What's more, you need to apply a height to the elements that have the background images. I only did it for one of them below.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(https://via.placeholder.com/150); height: 200px"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Make grid elements take the whole grid

I am making a grid with cards:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.navbar-brand,
.footer-text,
.page-link,
.form-input>label,
.checkbox {
color: #84a5a9 !important;
}
.wishes {
padding: 5px;
background: rgba(229, 229, 229, 0.4);
}
.wishes>span {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px !important;
/* identical to box height */
color: #84A5A9;
}
.container {
color: #84A5A9 !important;
}
.front-text {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: #84A5A9;
}
#media only screen and (max-width: 760px) {
.img {
height: 100px !important;
width: 100px !important;
}
.caption {
top: 30% !important;
}
.front-text {
font-size: 15px !important;
color: #84A5A9;
}
.bgimg-1 {
height: 700px !important;
}
.nav-title,
.wishes>span {
font-size: 14px !important;
}
.nav-logo {
height: 50px !important;
width: 50px !important;
}
.mobile {
padding: 0px 0px 0px 1px !important;
}
.form-input {
display: inline-grid !important;
}
.form-input>label,
input {
width: 100% !important;
}
.navbar-brand,
.footer-text {
font-size: 14px !important;
}
.footer-text {
width: 26% !important;
}
.footer-nav {
width: 40% !important;
}
}
.nav-logo {
height: 60px;
width: 60px;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
li:focus,
input:focus {
outline: none;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive {
max-height: 334px;
filter: grayscale(90%);
border: 1px solid #ccc;
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/*Naudojama submmito formos stulpeliams*/
label {
width: 150px;
padding-right: 20px;
display: inline-block;
}
.modal {
height: auto !important;
padding: 0 !important;
max-width: 800px!important;
max-height: 700px!important;
overflow-y: auto!important;
}
.container {
padding: 2px 16px;
}
.page-item.active .page-link {
z-index: 0 !important;
}
/* ----- NAVBAR ----- */
nav {
padding: 0px 5px 0px 20px !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1 !important;
}
nav .submit-button {
padding: 5px 10px;
margin: 5px;
}
/* ------- FOOTER ----- */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* -------- ICONS ------ */
.fa-instagram {
background: #125688;
color: white;
}
.fa {
padding: 10px;
font-size: 15px !important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 35px;
height: 35px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* PARALLAX */
.front-sd {
position: fixed;
left: 24.65%;
right: 50%;
top: 15.82%;
bottom: 43.75%;
}
.front-logo {
position: fixed;
left: 50%;
right: 19.1%;
top: 15.82%;
bottom: 43.75%;
background: url('../images/logo.png');
}
.bgimg-1 {
background: url('../images/clouds.png');
min-height: 100%;
height: 1024px;
}
.front-text {
font-size: 20px;
width: 50%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
/* opacity: 0.65; */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption {
position: absolute;
left: 0;
top: 18%;
width: 100%;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel=icon href=images/100sd.png type="image/png">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<nav class="mobile navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/100sd.png" class="nav-logo d-inline-block align-middle" alt="">
<span class="nav-title">title</span>
</a>
<div class="wishes"><span>Done: 7</span></div>
<ul class="menu">
</ul>
</nav>
<script>
</script>
<div class="bgimg-1">
<div class="caption">
<div>
<img src="images/100sd.png" class="img d-inline-block align-middle" alt="">
<img src="images/logo.png" class="img d-inline-block align-middle" alt="">
</div>
<div class="front-text">
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</span>
</div>
</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
since I have paging I want my elements take the whole grid so it wouldn't look like it's the end of data though there are next page. However on certain sizes it doesn't take the whole grid and looks like:
I tried using auto-fill and auto-fit but I am clearly doing something wrong here. Coul anyone help?

Set the min value of your minmax to 400px:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.container {
color: #84A5A9 !important;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
/*Naudojama submmito formos stulpeliams*/
.container {
padding: 2px 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
It still breaks at about 2200px but it depends on your use case as to whether that's an issue.
You can always set a max-width to prevent this:
.grid {
max-width: 1900px // Or whatever
}

CSS - How to position this "menu" like on the UI design that I have made in Figma?

As you can see from the title I want to know how to position this menu that I will show to you like on this UI design that I have made.
Here is the examples:
And here is how I tried to do it.
This is the code so far:
<!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="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="root flexbox">
<div class="navbar flexbox">
<div class="container flexbox align-center">
<img src="Slike/logo-avion.png" alt="">
<div class="right-column flexbox align-center">
<div class="navbar__navigation">
Početna
Destinacija
O nama
Partner
</div>
<div class="order-btn flexbox align-center">
Prijavi se!
</div>
<div class="konj flexbox align-center">
Registriraj se!
</div>
</div>
</div>
</div>
<div class="content">
<div class="container flexbox">
<div class="content__left_column">
<h2>Ostvarite svoje
putovanje iz snova!</h2>
<p>Potraži svoj odmor na pravom mjestu!</p>
<div class="linija">
<span class="linija crna-linija"></span>
</div>
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
</div>
<div class="content__right_column">
<img src="Slike/template_3_-_copy_dribble1dribble_1.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
The div class kvadrati is used to make this menu. I know this may seem complicated to describe but I hope you know what I meant by asking this question. I tried using flexbox display and grid still failed. I am not a beginner in CSS but clearly this is something that I have a problem with.
Here is the CSS code:
.prvi {
width: 22rem;
height: 5.2rem;
border-radius: 0.6rem;
border: 0.1rem solid #afb0b9;
}
EDIT: Here is all of the styles.css
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
font-family: Inter;
}
.right-column {
margin-left: auto;
}
body {
background-color: #ffffff;
line-height: 3rem;
}
.container {
width: 1300px;
margin: auto;
}
.root {
font-size: 1.2rem;
flex-direction: column;
min-height: 100%;
}
.flexbox {
display: flex;
}
.align-center {
align-items: center;
}
a {
text-decoration: none;
}
html, body {
height: 100%;
}
.navbar {
margin-top: 20px;
}
.navbar__navigation a {
color: #b8becd;
display: inline-flex;
font-size: 1.5rem;
font-weight: 400;
margin-right: 20px;
}
.order-btn {
height: 4.4rem;
margin-left: 50px;
border-radius: 0.8rem;
border: 0.1rem solid #57d2a3;
margin-right: 15px;
}
.order-btn a {
padding: 21px 24px;
}
.navbar__navigation .active {
color: #202336;
}
.konj {
height: 4.4rem;
border-radius: 0.8rem;
background-color: #57d2a3;
}
.konj a {
color: #ffffff;
padding: 21px 24px;
}
.content__left_column {
margin-left: 20px;
margin-top: 200px;
}
.content__right_column {
margin-top: 90px;
margin-left: auto;
}
.content__left_column h2 {
width: 55.9rem;
color: #202336;
font-family: "Playfair Display";
font-size: 6.4rem;
font-weight: 700;
line-height: 8rem;
}
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
.linija {
margin-top: 21px;
width: 3.2rem;
height: 0.3rem;
border-radius: 0.4rem;
background-color: #202336;
}
.kvadrati {
margin-top: 20px;
display: grid;
grid-template: 70px 70px / 226px 226px;
width: 226px;
height: 52px;
grid-gap: 20px;
padding: 16px;
}
.kvadrati div {
border-radius: 10px;
border: 1px solid gray;
}

A couple issues with your code
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
As you can see both the grid div <div class="kvadrati"> and the items <div class="kvadrati drugi flexbox align-center "> share the same class kvadrati. As a result they both create a 2x2 grid. You should remove the kvadrati class on the 4 grid items.
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
And in this part of the code you give the <p> elements a margin-top: 69px;. This causes the <p> Items in your grid to move down 69 pixels. You could change <p>Potraži svoj odmor na pravom mjestu!</p> to a <h3> style it using a class so it doesn't affect the other <p> elements.
Alternatively, since you probably want a dropdown list, you can avoid this by using <select> tags instead. See here for a guide on creating a custom select.
-----------
Here is a simple example on how to use a grid to create a 2x2.
If you need more information on how to use css grid, read on w3schools or MDN
body {
margin: 0;
height: 80vh;
width: 80vw;
}
.grid {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
width: 100%;
height: 100%;
grid-gap: 16px;
padding: 16px;
}
.grid div {
border-radius: 10px;
border: 1px solid gray;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

boot strap overriding customized nav-bar

With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar

The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

How to place the same image at the top and at the bottom of the same column?

So the title pretty much explains my problem. For now, I have my image placed at the top of the column and at the same time I need it to be at the bottom. How can I do this?
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 200px;
}

Flexbox can do that:
.content {
padding: 0 35px;
}
.row {
display: flex; /* columns now equal height */
}
.first-column {
border: 1px solid;
height: 200px;
flex: 10; /* replicates md-10 */
}
.back-to-blog {
flex: 2; /* replicates md-2 */
display: flex;
flex-direction: column; /* sets directionality */
justify-content: space-between; /* separates elements across direction */
}
a {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="row">
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
</a>
<a href="/">
<img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
</a>
</div>
</div>
</div>
</div>

Here is another way if you want to stick into Bootstrap column classes:
HTML:
<div class="content">
<div class="row">
<div class="col-xs-2 col-sm-10 col-md-10 first-column">aaa</div>
<div class="col-xs-2 col-sm-2 col-md-2 back-to-blog">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</div>
</div>
</div>
</div>
CSS:
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 200px;
}
.back-to-blog{
height: 200px;
}
.btm-link{
position: absolute;
bottom: 0;
}
Codepen:
http://codepen.io/anon/pen/xZyGoQ