Container is not showing the full grid - html

Question

So i was just finishing building my first full site (with html and css), and in the video it was missing a portfolio page, i created one watching a video of a cool image grid i founded, but the grid keeps getting cut off. (Thats not the full html code, i deleted the other pages that are correct) Full image
body {
font-family: "Open Sans", sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background: #040404 url("../../assets/img/background.jpg") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
a {
color: #18d26e;
}
a:hover {
color: #35e888;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", sans-serif;
}
#header {
transition: ease-in-out 0.3s;
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 997;
overflow-y: auto;
}
#header * {
transition: ease-in-out 0.3s;
}
#header h1 {
font-size: 48px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
#header h1 a, #header h1 a:hover {
color: #fff;
line-height: 1;
display: inline-block;
}
#header h2 {
font-size: 24px;
margin-top: 20px;
color: rgba(255, 255, 255, 0.8);
}
#header h2 span {
color: #fff;
border-bottom: 2px solid #18d26e;
padding-bottom: 6px;
}
#header img {
padding: 0;
margin: 0;
}
#header .social-links {
margin-top: 40px;
display: flex;
}
#header .social-links a {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 1;
margin-right: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
}
#header .social-links a:hover {
background: #18d26e;
}
#media (max-width: 992px) {
#header h1 {
font-size: 36px;
}
#header h2 {
font-size: 20px;
line-height: 30px;
}
#header .social-links {
margin-top: 15px;
}
#header .container {
display: flex;
flex-direction: column;
align-items: center;
}
}
.nav-menu {
margin-top: -450px;
margin-left: 70%;
}
.nav-menu ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu li + li {
margin-left: 30px;
}
.nav-menu a {
display: block;
position: relative;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.nav-menu a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #18d26e;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
visibility: visible;
width: 25px;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #fff;
text-decoration: none;
}
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #fff;
}
.mobile-nav {
position: fixed;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
z-index: 9999;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
transition: ease-in-out 0.2s;
opacity: 0;
visibility: hidden;
border-radius: 10px;
padding: 10px 0;
border: 2px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #fff;
padding: 10px 20px;
font-weight: 500;
outline: none;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #18d26e;
text-decoration: none;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(9, 9, 9, 0.6);
overflow: hidden;
display: none;
transition: ease-in-out 0.2s;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
opacity: 1;
visibility: visible;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
/* Header Top */
#header.header-top {
height: 80px;
position: fixed;
left: 0;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.9);
}
#header.header-top .social-links, #header.header-top h2 {
display: none;
}
#header.header-top h1 {
margin-right: auto;
font-size: 36px;
}
#header.header-top .container {
display: flex;
align-items: center;
}
#header.header-top .nav-menu {
margin: 0;
}
#media (max-width: 768px) {
#header.header-top {
height: 60px;
}
#header.header-top h1 {
font-size: 26px;
}
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
section .container {
background: rgba(0, 0, 0, 0.9);
padding: 30px;
}
#media (max-width: 1080px) {
section {
top: 120px;
}
section.section-show {
top: 80px;
}
}
.section-title h2 {
font-size: 14px;
font-weight: 500;
padding: 0;
line-height: 1px;
margin: 0 0 20px 0;
letter-spacing: 2px;
text-transform: uppercase;
color: #aaaaaa;
font-family: "Poppins", sans-serif;
}
.section-title h2::after {
content: "";
width: 120px;
height: 1px;
display: inline-block;
background: #4ceb95;
margin: 4px 10px;
}
.section-title p {
margin: 0;
margin: -15px 0 15px 0;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
color: #fff;
}
.about-me .content h3 {
font-weight: 700;
font-size: 26px;
color: #18d26e;
}
.about-me .content ul {
list-style: none;
padding: 0;
}
.about-me .content ul li {
padding-bottom: 10px;
}
.about-me .content ul i {
font-size: 20px;
padding-right: 2px;
color: #18d26e;
}
.about-me .content p:last-child {
margin-bottom: 0;
}
.counts {
padding: 70px 0 60px;
}
.counts .count-box {
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
background: rgba(255, 255, 255, 0.08);
}
.counts .count-box i {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
background: rgba(255, 255, 255, 0.1);
padding: 12px;
color: #18d26e;
border-radius: 50px;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #fff;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-size: 14px;
}
.skills .progress {
height: 50px;
display: block;
background: none;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #fff;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: rgba(255, 255, 255, 0.15);
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color: #18d26e;
}
.interests .icon-box {
display: flex;
align-items: center;
padding: 20px;
background: rgba(255, 255, 255, 0.08);
transition: ease-in-out 0.3s;
}
.interests .icon-box i {
font-size: 32px;
padding-right: 10px;
line-height: 1;
}
.interests .icon-box h3 {
font-weight: 700;
margin: 0;
padding: 0;
line-height: 1;
font-size: 16px;
color: #fff;
}
.interests .icon-box:hover {
background: rgba(255, 255, 255, 0.12);
}
.testimonials .testimonial-item {
box-sizing: content-box;
min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
margin: -40px 0 0 40px;
position: relative;
z-index: 2;
border: 6px solid rgba(255, 255, 255, 0.12);
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 45px;
color: #fff;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0 0 0 45px;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.25);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 15px 0 15px;
padding: 20px 20px 60px 20px;
background: rgba(255, 255, 255, 0.1);
position: relative;
border-radius: 6px;
position: relative;
z-index: 1;
}
.testimonials .owl-nav, .testimonials .owl-dots {
margin-top: 5px;
text-align: center;
}
.testimonials .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3) !important;
}
.testimonials .owl-dot.active {
background-color: #18d26e !important;
}
#media (max-width: 767px) {
.testimonials {
margin: 30px 10px;
}
}
.honeycomb
{
display: flex;
flex-wrap: wrap;
list-style: none;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 10px;
transform: translateY(80px);
}
.honeycomb-cell
{
-webkit-box-flex: 0;
flex: 0 1 250px;
max-width: 250px;
height: 137.5px;
margin: 65.4px 12.5px 25px;
position: relative;
padding: 0.5em;
text-align: center;
z-index: 1;
box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.1);
}
.honeycomb-cell_img
{
object-fit: cover;
object-position: center;
filter: grayscale(100%);
}
.honeycomb-cell_title
{
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
text-transform: uppercase;
color: #fff;
font-weight: 700;
font-size: 1.75em;
transition: opacity 350ms;
}
.honeycomb-cell_title > small
{
font-weight: 300;
margin-top: 0.25em;
}
.honeycomb-cell::before,
.honeycomb-cell::after
{
content: '';
}
.honeycomb-cell::before,
.honeycomb-cell::after,
.honeycomb-cell_img
{
top: -50%;
left: 0;
width: 100%;
height: 200%;
display: block;
position: absolute;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: -1;
}
.honeycomb-cell::before
{
background: #fff;
transform: scale(1.055);
}
.honeycomb-cell::after
{
background: #111111;
opacity: 0.7;
transition: opacity 350ms;
-webkit-transition: opacity 350ms;
}
.honeycomb-cell:hover
.honeycomb-cell_title
{
opacity: 0;
}
.honeycomb-cell:hover
.honeycomb-cell_img
{
filter: grayscale(0%);
}
.honeycomb-cell:hover::before
{
background: #18d26e;
}
.honeycomb-cell:hover::after
{
opacity: 0;
}
.honeycomb_Hidden
{
display: none;
opacity: 0;
width: 250px;
margin: 0 12.5px;
}
#media (max-width: 550px)
{
.honeycomb-cell
{
margin: 81.25px 25px;
}
}
#media (min-width: 550px) and (max-width: 1080px)
{
.honeycomb-cell:nth-child(3n)
{
margin-right: calc(50% - 125px);
margin-left: calc(50% - 125px);
}
.honeycomb_Hidden:nth-child(3n + 5)
{
display: block;
}
}
#media (min-width: 825px) and (max-width: 1100px) {
.honeycomb-cell:nth-child(5n + 4)
{
margin-left: calc(50% - 275px);
}
.honeycomb-cell:nth-child(5n + 5)
{
margin-right: calc(50% - 275px);
}
.honeycomb_Hidden:nth-child(5n),
.honeycomb_Hidden:nth-child(5n + 3)
{
display: block;
}
}
#media (min-width: 1100px)
{
.honeycomb-cell:nth-child(7n + 5) {
margin-left: calc(50% - 400px);
}
.honeycomb-cell:nth-child(7n + 7),
.honeycomb-cell:nth-child(7n + 5):nth-last-child(2)
{
margin-right: calc(50% - 400px);
}
.honeycomb_Hidden:nth-child(7n + 7),
.honeycomb_Hidden:nth-child(7n + 9),
.honeycomb_Hidden:nth-child(7n + 11)
{
display: block;
}
}
.services .icon-box {
text-align: center;
background: rgba(204, 204, 204, 0.1);
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
.services .icon-box .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: #18d26e;
border-radius: 5px;
transition: all .3s ease-out 0s;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transform-style: preserve-3d;
}
.services .icon-box .icon i {
color: #fff;
font-size: 28px;
}
.services .icon-box .icon::before {
position: absolute;
content: '';
left: -8px;
top: -8px;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 5px;
transition: all .3s ease-out 0s;
transform: translateZ(-1px);
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
color: #fff;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
background: #18d26e;
border-color: #18d26e;
}
.services .icon-box:hover .icon {
background: #fff;
}
.services .icon-box:hover .icon i {
color: #b2c2b9;
}
.services .icon-box:hover .icon::before {
background: #35e888;
}
.services .icon-box:hover h4 a, .services .icon-box:hover p {
color: #fff;
}
#-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.credits {
position: fixed;
right: 0;
left: 0;
bottom: 0;
padding: 15px;
text-align: right;
font-size: 13px;
color: #fff;
z-index: 999999;
}
#media (max-width: 992px) {
.credits {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
}
}
.credits a {
color: #18d26e;
transition: 0.3s;
}
.credits a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Rodrigo C. Programmer</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon/favicon.ico" rel="icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header-tops">
<div class="container">
<h1>Rodrigo Carrard</h1>
<h2>Apenas um <span>Programador</span> do Brasil</h2>
<div class="social-links">
<i class="icofont-instagram"></i>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Portfolio Section ====== -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>Meus projetos</p>
</div>
<ul class="honeycomb">
<li class="honeycomb-cell">
<img class="honeycomb-cell_img" src="assets/img/LogoRc.png">
<div class="honeycomb-cell_title">R.C Portfolio</div>
</li>
<li class="honeycomb-cell">
<img class="honeycomb-cell_img" src="assets/img/clientes/diceshield.png">
<div class="honeycomb-cell_title">Party Buddy</div>
</li>
<li class="honeycomb-cell honeycomb_Hidden">
</li>
</ul>
</div>
</section>
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
<h2>Services</h2>
<p>Meus serviços</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4>Desenvolvimento de site</h4>
<p>Farei seu site do utilizando Html / Css / JavaScript / Php </p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4>Wordpress Site</h4>
<p>Desenvolverei seu site profissional ultilizando o Wordpress</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4>Criação de aplicativos Mobile</h4>
<p>Desenvolverei seu aplicativo mobile com base no seu pedido</p>
</div>
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Meu contato</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>Endereço</h3>
<p>Itapema, Meia Praia, SC, Brasil</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<i class="icofont-instagram"></i>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-envelope"></i>
<h3>Meu email</h3>
<p>rodrigocarrard.pessoal#gmail.com</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-phone-call"></i>
<h3>Telefone</h3>
<p>Ainda não disponivel</p>
</div>
</div>
</div>
<form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</section>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>

Answer 1

You can replace this for your body styling
body{
position:relative;
z-index:1;
color:#070707;
}
body::before{
content:"";
width:100vw;
height:100vh;
background-image: url("https://i.stack.imgur.com/ILQso.png");
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
position:absolute;
z-index:-1;
}
I have positioned the body relative and body::before pseudo element position absolute and made it go at the back of the body using z-index for it to appear as a background. Try out this implemetation. For the Image I have used an online image url