There appears to be an unusual white line running along the right side of the page

While working on a document, I noticed an odd white line appearing in the right margin of the page. Despite setting the width to 100% or using margins to center the content, this line persists and I can't figure out why. I've read suggestions on StackOverflow that the use of position:relative can cause issues with navigation bars and other HTML elements.


/* Global */

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.colored {
  color: #e86c00;
}
NO COPYRIGHT ©
Partners

Partner 1

Partner 2

Partner 3

Partner 4

Partner 5

Partner 6

Partner 7

Official telephone +XXX / XXX XXXX

Contact with workers +XXX / XXX XXXX

Other Contacts Contact

htmlcssbootstrap-4

Answer №1

Encountering a problem with overflow in the headers (nav h1 & .sub h1) and ul li due to their relative positioning.

To rectify this issue, here are the required changes:

  • For nav h1 & .sub h1: incorporate padding-left
  • For ul li: remove left:20%

/* Global */

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.colored {
  color: #e86c00;
}


/* Local */


/* navigation bar */

#headNavigation {
  display: block;
  height: 110px;
  width: 100%;
  background: #222;
}

ul {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-type: none;
  position: relative;
  bottom: 50px;
}

ul li {
  display: inline-block;
  padding: 25px 20px 0 20px;
  text-align: center;
  opacity: 0.2;
  position: relative;
  bottom: 20px;
}

ul li a {
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}

nav h1 {
  color: #fff;
  position: relative;
  top: 30px;
  padding-left: 30px;
}

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

Building a Dynamic CSS Grid

Today is the first time I'm reaching out for help rather than figuring things out on my own. I'm currently working on a website layout that consists of visible tiles all with equal sizes, forming a grid structure. The challenge I face is making t ...

javascripthtmlcss

I am having trouble getting the jsTree ajax demo to load

I am having trouble running the basic demo "ajax demo" below, as the file does not load and the loading icon continues to churn. // ajax demo $('#ajax').jstree({ 'core' : { 'data' : { ...

javascripthtmlajaxjstree

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

Encountering an error message: Notice: Undefined index: file_upload in C:\MAMP\htdocs\basic_files\upload.php on line 3 Each time I attempt to upload a file using the form. While many attribute this issue to problems with enctype or ...

phphtmlfile-uploadundefined-index

I am currently encountering a problem in my attempts to retrieve data from mongodb

I'm having trouble retrieving some data from my database, and I'm not sure why it's not displaying correctly. Any help or feedback would be greatly appreciated! // Below is the code for my router: router.get('/add', (req, re ...

htmlnode.jsmongodbejs

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

javascripthtmljquery-uihyperlinknicedit

"Stylish hover effect for list items using CSS arrows

I'm struggling with creating a list menu that has a 1px border and spans the entire width. Here is what I have so far (image 1): https://i.stack.imgur.com/y3EDP.png The tricky part is making it so that when the mouse hovers over a menu item, someth ...

css

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

This function does not have the capability to save cookies

I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...

javascripthtmlcookies

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

javascriptjqueryhtml

How can I locate the ID of the HTML input element with jQuery?

I am trying to create a page with a button that looks like this: <input type="button" id="btnAddBusinessUnit" value="Add Business Unit" class="clsAddBusinessUnit" alt="testBtn" /> When the button is clicked, I want to display the id 'btnAddBus ...

javascriptjqueryasp.nethtml

Ways to toggle the display of a div depending on various radio button selections

Currently, I am working on a project using HTML along with Bootstrap and Jquery. My objective is to dynamically hide a div based on the selection of multiple radio buttons without requiring a submit button. The code snippet that I have provided below works ...

jqueryhtmltwitter-bootstrap

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

Tips for positioning text underneath an image with HTML and CSS

I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are. Here is the code: <div style="float: right;"><img src="sites/default/files/ ...

htmlcssdrupaldrupal-7

Styling jQuery Draggable and Droppable <li> elements

I am facing a challenge with my drag and drop functionality using jQuery. While the drag drop feature works perfectly, I need to display two separate pieces of information from a database on each "li" item in different styles. My goal is to include a "tra ...

jqueryhtmlcss

What is the best way to showcase the dropdown menu items of a bootstrap navbar in a horizontal layout instead of vertical?

While utilizing Bootstrap 4, I encountered an issue with the dropdown section where the items are displayed vertically instead of horizontally. I want these dropdown items to be arranged horizontally next to each other. <nav class="navbar navbar-expand ...

htmlcssbootstrap-4

Access within the identical window (PHP file) as opposed to an Iframe

I am currently working with a PHP file that retrieves data from my database. <?php $cdb = new PDO('mysql:dbname=xxx;host=localhost', 'xxx', 'xxx'); foreach ($cdb->query("SELECT * FROM images ORDER BY posted DESC LIMIT ...

phpjavascripthtmlajaxiframe

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

When using AngularJS 1.3, it is necessary to include the <base> tag in HTML5 mode. This led me to consider the pros and cons of HTML5 mode versus Hash mode. In Hash mode, the major drawback is that URLs can appear unattractive and may not be easy fo ...

javascripthtmlangularjs

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components