I'm currently attempting to align my project grid in the center, but notice there is some excess margin or space to the right of the page. Any suggestions on how to resolve this issue?

My portfolio site's project section is responsive on smaller screens, but on larger screens there is extra space to the right. I have tried removing margins but the issue persists. How can I center the container and fix this problem?

Check out the problem in my dev tools here

#projects {
  text-align: center;
}

#projects .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

#projects .grid .container {
  text-align: center;
}

#projects .container {
  margin: 0;
  position: relative;
}

#projects .container .box {
  position: relative;
  margin: 40px auto;
  width: 250px;
  height: 120px;
  overflow: hidden;
  background:red;
  transition: 0.5s;
}

#projects .container .box:hover {
  z-index: 1;
  transform: scale(1.25);
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}

#projects .container .box .imgbx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#projects .container .box .imgbx:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, #1a75ff, #000);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: 0.5s;
}

#projects .container .box:hover .imgbx:before {
  opacity: 1;
}

#projects .container .box .imgbx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#projects .container .box .box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  padding: 10px;
  align-items: flex-end;
}

#projects .container .box .box-content h3 {
  color: #fff;
  transition: 0.5s;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-size: 14px;
  transform: translateY(200px);
}

#projects .container .box:hover .box-content h3 {
  transform: translateY(0);
  transition-delay: 0.6s;
}

#projects .container .box .box-content p {
  color: #fff;
  transform: translateY(200px);
  transition: 0.5s;
  font-size: 10px;
}

#projects .container .box:hover .box-content p {
  transform: translateY(0);
  transition-delay: 0.7s;
}
<section id="projects">

  <h2 class="content-title">Recent Work</h2>
  <div class="grid container">

    <div class="box">
      <div class="imgBx">
        <img class="projectImg" src="project-images/gadue.png" id="img1" alt="">
      </div>
      <div class="box-content">
        <div>
          <h3>Gadue</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate, blanditiis?</p>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="imgBx">
        <img class="projectImg" src="project-images/myherohome.png" id="img2" alt="">
      </div>
      <div class="box-content">
        <div>
          <h3>My Hero Wiki</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, natus.</p>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="imgBx">
        <img src="project-images/stockapphome.png" alt="">
      </div>
      <div class="box-content">
        <div>
          <h3>TheStockApp</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur.</p>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="imgBx">
        <img class="projectImg" src="project-images/blackjack.png" id="img4" alt="">
      </div>
      <div class="box-content">
        <div>
          <h3>blackjack game</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, fuga.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №1

Have you considered utilizing the grid system from Bootstrap for your layout? It could help address this issue. Alternatively, you might want to experiment with adding a margin to your grid container like so:

#projects .grid{
     margin: 0 auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Hovering over one div does not trigger the display of another div

I seem to have forgotten my CSS skills, but I am facing an issue. Here is the code snippet: <div class="footer_container"> <div class="website_logo_to_footerexpand"></div> <div class="info_cont"> <div class ...

Exploring Material UI: Step-by-step guide to customizing component styles

After reviewing the documentation, I have discovered two ways to style the component: import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = make ...

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

Parsley JS experiencing compatibility issues with bootstrap-select

After creating a form using , I encountered an issue where it displayed errors for text inputs but not for bootstrap-select. Here is a brief example below: https://jsfiddle.net/sanoj908572/jdo6reaf/2/ HTML <div class="form-group"> <labe ...

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

ajax request sends data to php file, which then processes the data and sends it back using $_POST

Currently, I am in the process of developing a budget management application using a combination of HTML, Javascript, and PHP. The main objective is to allow users to input data into a database through a form interface. To achieve this functionality, I hav ...

Using special symbols in HTML5 data attributes

Is it feasible to locate all DOM elements using jQuery with wildcard characters in the attribute name? Take into consideration the following HTML code: <input id="val1" type="text" data-validate-required data-validate-minlength ...

Using AJAX in a loop iteration

I am struggling to grasp AJAX and its application for my specific needs. I am required to incorporate ajax calls within a foreach loop in my project. The challenge arises when contemplating the scenario where using PHP calls could result in all actions fir ...

What is the best way to incorporate negative/positive symbols into Bootstrap collapsible panels?

Currently, I am utilizing Bootstrap and have implemented collapse panels in my project. I would like to add plus and minus icons to these panels. I have managed to achieve this by using a code snippet that I found on Stack Overflow (I will include the lin ...

Problem with rendering Ionic v2 HTML in Angular 2

Issue at Hand: Currently, I am developing a hybrid app using Ionic v2 and everything seems to be functioning correctly. When I use ionic serve, the app works as expected in the browser with no issues. However, when I try running the app on an Android devi ...

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

Addressing Image Issues in CSS Grid

I'm struggling to position two images in different sections of a grid layout without overlapping them. I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space. Referencing the images by ...

Retrieving an Instance of Google Maps Object with the Help of JQuery

I'm currently working on a script that, when executed, will retrieve an instance of a Google Maps object from the webpage using JQuery. For example, if there is a map present on the page, it will be structured like this: <div class="map">....& ...

The concept of recursion in AngularJS directives

I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...

Finding your current location and address using HTML5 geolocation

My web application utilizes HTML5 geolocation to obtain latitude and longitude coordinates. I am looking for a way to convert these coordinates into actual addresses whenever possible. Once that is done, I need to save the address information into a MySQ ...

Challenges with creating a responsive YouTube iframe using the API

Looking to integrate a Youtube video using the iFrame API to capture events effectively, embedding the player alone is not an option. Following the documentation, everything functions correctly with code like: var tag = document.createElement('scrip ...

Creating a basic image carousel with JavaScript, CSS, and HTML

After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attemp ...

Unable to locate the nav-brand in the Bootstrap navigation bar

I have encountered an issue with my nav-bar that works perfectly fine for the responsive part. However, on large screens, I am unable to click on the nav-brand link. Below is the code I used: <!-- NavBar --> <div class="navbar-wrapper"> &l ...

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...