Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarification. Attached are the CSS and HTML files. Apologies for the messy CSS code, as it's a combination of three stylesheets. Any suggestions or assistance would be greatly appreciated, as I feel overwhelmed by the complexity at this point.

https://i.sstatic.net/KhKE9.png

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
...
<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Central Computers</title>
  // Remaining HTML content goes here

</body>
<script src="js/menu.js"></script>
</html>

Answer №1

It is advised to eliminate the container width specified in this section

   @media (min-width: 400px) {.container {
   // width: 85%;   //commented width
   padding: 0;
  }
}

Answer №2

After some deep contemplation and numerous head-banging sessions, it dawned on me that my calculations were slightly off.

I eventually realized that I had neglected to round up the final decimal place in my calculations.

 .one.column,
  .one.columns                    { width: 8.33333333333%; }
  .two.columns                    { width: 16.6666666667%; }
  .three.columns                  { width: 25.0%;            }
  .four.columns                   { width: 33.3333333333%; }
  .five.columns                   { width: 41.6666666667%; }
  .six.columns                    { width: 50.0%;            }
  .seven.columns                  { width: 58.3333333333%; }
  .eight.columns                  { width: 66.6666666667%; }
  .nine.columns                   { width: 75.0%;          }
  .ten.columns                    { width: 83.3333333333%; }
  .eleven.columns                 { width: 91.6666666667%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

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

The ESLint tool seems to be struggling to detect the package named "@typescript-eslint/eslint-plugin"

Struggling with getting ESLint to function properly on a new Angular project in VS Code. The error message I keep encountering is about failing to load "@typescript-eslint/eslint-plugin". After spending the past 3 hours troubleshooting, I have searched hig ...

Adjust the contents of a div to automatically fit within a hidden overflow div

Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is: .jumbotron { overfl ...

Providing structured Express app to deliver HTML and JavaScript content

Currently, I am working with Express and facing a seemingly simple challenge. Here is the structure of my directories: |-config |---config.js |---routes.js |-server.js |-scripts |---controllers |------controllers.js |---directive ...

Applying CSS Filters can sometimes interfere with the functionality of 3D

While playing around with CSS transforms, I discovered that filters flatten the transforms just like setting transform-style: flat. var toggleFilter = function() { var div = document.getElementById("cube") if (div.className == "cube") { d ...

Activate a jQuery plugin on elements that are dynamically generated

Here is the code snippet I am using: $(".address-geocomplete").geocomplete({ country: "US", details: ".details", detailsAttribute: "data-geo" }); When these elements are loaded with the document, everything works smoothly. However, there seem ...

Looking for a way to retrieve Instagram data with Python using Selenium, following Instagram's recent API changes? Having trouble locating all entries, as only 12 are showing up?

I am currently working on scraping Instagram using Python and Selenium with the objective of extracting the URL of all posts, number of comments, number of likes, etc. Although I have successfully scraped some data, I have encountered an issue where the p ...

Unable to insert HTML code into a div upon clicking an image button

I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...

Error: Unable to encode data into JSON format encountered while using Firebase serverless functions

I am currently working on deploying an API for my application. However, when using the following code snippet, I encountered an unhandled error stating "Error: Data cannot be encoded in JSON." const functions = require("firebase-functions"); const axios = ...

Clear the cache following the service call

I am currently working on a service that has two methods. Utilizing the built-in cache support for $resource, I am trying to implement a way to refresh the cache when a service call is made from the controller. I attempted to use $cacheResource without suc ...

Is it possible for the HTML (source code of a web page) to alter once the page is saved onto a local computer?

Upon opening a webpage at http://www.designova.net/rise/index-01.html, I decided to inspect its source code. Afterwards, I saved the page to my computer and opened it in an editor (sublime text 2). To my surprise, I noticed that the HTML content in the two ...

What is the best way to locate a document's array item in MongoDB (Mongoose) using its "_id" field?

Here is the schema I'm working with using NestJS and Mongoose: @Schema({ timestamps: true }) export class Listing { @Prop({ type: [{ bidderId: { type: Types.ObjectId, required: true, select: false, ref: User.name, index: true }, ...

Passing index value using navigateByUrl method

I have developed a home component and a view component to display different levels of employee details. The home component presents basic information, while the view component shows comprehensive details. The code in my home.component.html file looks like ...

What is the correct way to define the field name in the update() function of Mongoose?

When attempting to update every field contained in the dataToChange object, I encountered a problem where the update() method does not take the key name from the outside. Instead, it looks for a "key" field within the database's object. How can I work ...

Ways to display a JSON object in CSV format

Is there a way to export a JSON object to a CSV file, where the sub-fields contain arrays of objects? I am unsure how to properly represent this embedded data in the CSV format. ...

Having a tough time navigating the Bootstrap upgrade from 2.x to 3.x - now my design is all out of whack

Upgrading my site to the newest version of Bootstrap has been quite the challenge. I'm noticing that despite the window size being the same, version 1 and version 2 of my site are displaying different @media sizes. What's going on? On the left i ...

What is the technique for accessing dynamic object properties in Javascript?

I am dealing with a dynamic object where the property values change based on different data sets. For example: MyObj = { country:"Ind", Place:"Pune"} Now, I have a data value that determines which property value I need to retrieve. var MyArr = this.Filt ...

Generating exportable dynamic code in Javascript

Any assistance or links to similar inquiries would be greatly welcomed as I have conducted some research but am uncertain about the best approach to take in this situation. I find it difficult to articulate exactly what I need, so I have created a visual ...

Iteratively modify each essential attribute of a JSON object

In my data set, I have moisture levels recorded at various timestamps in a JSON object: { "values": { "21-Aug-2020 20:28:06:611591": "58.59", "21-Aug-2020 20:28:09:615714": "71.42", "21-A ...

Retrieve the selected date from the date picker widget

Welcome to my custom datepicker! Here is the HTML code: <div class="field-birthday field-return" id="birthday-edit" style="display:none;"> <div class="birthdaypicker"></div> <input class="hidden" name="birthday" type="hidden" ...

When using navigator.mediaDevices.getUserMedia on an iPhone, the webcam is activated in fullscreen mode

I'm facing an issue with the webcam functionality on my app. It works perfectly on Android and Windows, but when I try to use it on iPhone, the webcam opens in a separate full-screen view. Any ideas on how to resolve this? Thank you for your help in a ...