The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section. Even after attempting solutions like setting left: -9px or adding overflow hidden properties, the issue persisted. The use of a strictly flex layout did not yield any positive results either. How can I eliminate this unwanted gap on the left side? Is this an instance of trailing-space or an overflow problem?

* {
  box-sizing: border-box;
}
html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background: #3b3832;
  background-size: cover;
  font-family: "Roboto Condensed";
  overflow: visible;
}
main {
  width: 100vw;
}... (remaining CSS code here)
<!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="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
      rel="stylesheet"
    />
    <title></title>
  </head>
  <body>
    <div class="tool-bar">... (remaining HTML code here)

Answer №1

Would this be helpful for you? Feel free to review the snippet

I have eliminated the padding.

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background: #3b3832;
  background-size: cover;
  font-family: "Roboto Condensed";
  overflow: visible;
}
main {
  width: 100vw;
}
header {
  position: sticky;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: white;
  opacity: 0.8;
  justify-content: center;
  z-index: 100;
}
.menu-icon {
  display: none;
  cursor: pointer;
}
nav {
  width: 100%;
  background-color: white;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
nav ul li {
  position: relative;
  float: left;
}
nav ul li:hover {
  background-color: gray;
  opacity: 0.6;
  border-radius: 6px;
}
.nav-links {
  list-style: none;
  display: flex;
  flex-direction: row;
}
.nav-links li a {
  display: block;
  font-size: 1.5rem;
  color: black;

  text-decoration: none;
  padding: 20px;
}
#menu-bar {
  display: none;
}
header label {
  font-size: 1.5rem;
  color: black;
  cursor: pointer;
  display: none;
  background-color: white;
  opacity: 0.8;
  padding: 20px;
  float: right;
}
.tool-bar {
  background-color: black;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 2rem;
  z-index: 1;
  text-align: center;
  color: white;
}
.tool-bar ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a:visited {
  color: auto;
}

.tool-bar ul li a:visited {
  text-decoration: none;
  color: white;
}
.blend-text {
  position: absolute;
  left: 10vw;
  right: 10vw;
  padding: 5px;
  text-align: center;
  z-index: 1;
  background-color: white;
...
      <h2 class="blend-text">
        Welcome, I develop websites and web applications
      </h2>
    </div>
    <div class="grid-container">
      <div class="grid-item info">
        <img
          class="headshot"
          src="/images/headshot.jpeg"
          alt="picture of me in the mountains"
        />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. In repellat
          voluptas incidunt praesentium, aut obcaecati fugiat eligendi
          necessitatibus, architecto molestias amet harum repudiandae quos
          excepturi pariatur alias ex. Dolorem impedit distinctio, ducimus
          voluptates nam blanditiis asperiores reprehenderit velit dolore
          aliquid fugiat! Ad officia ab aliquam, ex maxime suscipit! Facilis
          doloribus maxime enim corporis numquam labore quia qui temporibus
          libero dignissimos.
        </p>
      </div>
      <div class="grid-item skills">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Voluptatibus magni minus voluptas repellendus natus optio hic neque
          ipsa dolor, non iure saepe dolore autem sed provident, minima
          corrupti. Quam quos..."

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

What is the best way to trigger the download of an image file created by PHP to a user's computer?

My PHP code (upload.php) allows users to upload an image from index.html, resize it, add a watermark, and display it on the same page. Users can download the watermarked image by using the 'Save image as...' option. The resized image is saved in ...

Updating all the direct components within the corresponding category with jQuery

Here is the HTML content I am working with: <li class="info"> info<li> <li class="other"> info<li> <li class="other"> info<li> <li class="Error"> error<li> <li class="other"> error<li> < ...

Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which ...

The carousel top position in Bootstrap 4 is not functioning properly

I am struggling to get the teal rectangle to move to the top of the carousel. I have set my carousel to have a position relative and my teal rectangle to have a position absolute with top="0", but it doesn't seem to be working properly. Instead of mov ...

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

Switch the scroll direction in the middle of the page and then switch it back

Yesterday, while browsing online, I stumbled upon this website and was amazed by the unique scroll direction change from vertical to horizontal mid-page. I'm curious about how they managed to achieve that effect. Does anyone have insight into the pro ...

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

Quicker way to apply appendChild

Is there a more efficient method to simplify the process of creating elements from an object fetched via a request? While the current code is functional, it seems overly verbose for what appears to be a straightforward task. async function getJobs() { ...

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

What is the best way to ensure that this image is responsive and not overly tiny when viewed on Internet Explorer

Check out my website: Here's a snapshot of the problem: I've been struggling to make my image responsive and prevent it from shrinking on IE 8. The webpage functions well on most modern browsers except for IE 8. I want it to display properly ac ...

Combining the lower margin of an image with the padding of a container: a step-by-step guide

There are two divs with a 50px padding, making them 100px apart. The top div contains an image floated to the right with paragraphs wrapping around it. The requirements team requests a 20px margin below the image if text flows under it, but no margin if th ...

Looking for the answer to utilize selenium for product scraping

I'm currently focused on a personal project involving parsing product names and prices. To achieve this, you can navigate to shoppingSite. After arriving at the site, click the button below the map, then click it again on the right side. Opt for the u ...

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

The combination of two tags can create a powerful and impactful presence

My task is to place two <h3> tags in the same line or paragraph. <h3>This is the first paragraph. </h3> <h3>This is the second paragraph.</h3> I would like the output to look like this: This is the first paragraph. This is Se ...

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

Display a division upon clicking a button using AngularJS and HTML

Looking to implement a functionality in my HTML page using angularJS. I am currently learning angularJs and experimenting with a feature where clicking on a button will display a specific div (EmployeeInfoDiv) on the webpage. The idea is to fill out some t ...