The width of the content is larger than the size of

Despite searching through previous questions on this topic, following advice, and examining the full CSS, I am still struggling to understand...

The width of my body and html is set to 100% and I cannot identify any padding or other factors affecting it.

If anyone could kindly point out what the issue might be, it could be something simple that I'm overlooking.

You can view the website here: www.niklaskoskela.com

I apologize for not providing just a snippet, but I truly cannot locate the problem.

Best regards, Niklas

htmlcsswidthviewport

Answer №1

The source of the problem appears to lie within your .nav ul code. Specifically, it seems that the margin-right: -8%; is causing issues.

For those searching for a solution, I recommend checking out one of Niklas' projects like

Answer №2

It seems like the issue lies with the height of the div id="wrapper". Try removing the height:100% and see if that solves it.

#wrapper {
width: 100%;
/*height: 100%;*/
}

Answer №3

I concur with damienoneill2001 this is the problem

make adjustments to your css like this

.nav ul {
    float: right;
    margin-left: 20px;
    margin-top: 1.6%;
    padding-top: 1%;
    width: 40%;
}

eliminate width from body width:100% it will default to auto width

body {
    background-color: #F5F5F5;
    height: 100%;
    text-decoration: none;
}

let's modify some css for navigation and align it to the right corner

.nav ul li a.next img {
    float: right;
    margin-right: 20%;
    opacity: 0.7;
    text-decoration: none;
    width: 15%;
}

.nav ul li a.close img {
    float: left;
    margin-left: 8%;
    opacity: 0.7;
    text-decoration: none;
    width: 15%;
}

.nav ul li a.previous img {
    float: left;
    margin-left: 19%;
    opacity: 0.7;
    text-decoration: none;
    width: 15%;
}

.nav ul {
    float: right;
    margin-top: 1.6%;
    padding-top: 1%;
    width: 24%;
}

also remember to update the hover classes for width and margin

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

Struggling with creating a responsive navigation bar using Bootstrap

We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads! Here's a look at our current header setup: This is the current HTML code for our ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navigation

I'm experiencing an issue with my dropdownlist not triggering the onchange event in AngularJS

I am a beginner in the world of AngularJS and I am trying to extract the values OnChange from a dropdown list. Here is the code that I have experimented with: <div> <select ng-controller="UserSelection as User" ng-model="User.UserSelected" n ...

javascripthtmlasp.netangularjs

Is it important that the end date does not exceed the start date?

In my request, the end date cannot be later than the start date. For example, if the start date is 24/4/2017 and the end date is 23/4/2017, the search function should be disabled for the calendar date 23/4/2017. Only dates from 24/4/2017 onwards should be ...

javascripthtmlangularjs

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

My client has a new requirement: adding functionality to increase font size, adjust contrast/brightness, and control sound on his website. When clicking on any of the control images, a slider should appear for the user to make adjustments accordingly. Ho ...

javascriptphpjqueryhtmlcss

What is the reason for nesting divs within each other?

Can anyone help me troubleshoot this Django template code? I have noticed that the main-card-faq div is being rendered inside the main-card div even though it's clearly outside. Any thoughts on what might be causing this issue? {% extends 'base.h ...

htmlcssdjango

How to align text in the center of a card using Angular Bootstrap

I have a column div that I need to center the text in Here is my code: <div class="card mb-4"> <div class="card-header"> <div class="card-title-wrap bar-info"> ...

cssangularbootstrap-4

Toggle a button with javascript

My setup involves two switches: <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch1" checked> <label class="onoffswitch-label" for="switch1"> <span class="onoffswitch-inner"></span> <span ...

javascripthtml

Utilizing AngularJS to bind data with labels and passing it in a form

I'm having trouble binding input data with label tags and using the same ng-model in a post method. Only one thing works at a time, and when I try to pass the label in the post method, it doesn't work. This issue is causing me difficulty in delet ...

jqueryhtmlangularjsangularjs-material

Adding Data to a Database Using Ajax with PHP

I am trying to use Ajax to insert data into a database, but I keep encountering this error: Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105) Error screenshot: https://i.sstatic.net/AmXka.jpg The HTML and ...

javascriptphpjqueryhtml

Looking for assistance with the navbar notification icon?

My navbar notification button is causing a problem by resizing the navbar. example Below is the code snippet: .badge-notify{ background:red; position:relative; top: -20px; left: -35px; } <ul ...

htmlcssbuttonnotificationsnavbar

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

htmlcsscss-selectors

Preventing document.getElementById from throwing errors when the element is null

Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...

javascripthtmlnull

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

Angular - creating adaptive HTML container with CSS styling

I am trying to achieve a layout similar to the one shown in the image. A container can have multiple elements starting within it or no elements at all. The elements always have a fixed height, and the container's height is determined by the number of ...

htmlcssangular

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

javascriptjqueryhtmlcss

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase ...

javascripthtmlcssvisual-studiofunction

In IE10 Mobile, the behavior of `position: fixed` appears to mimic that of `position

My page has a div that is positioned to the top right corner using the following CSS: position: fixed; top: 10px; right: 25px; While this positioning works perfectly on most browsers and devices, it behaves differently on IE10 Mobile. In IE10 Mobile, it ...

csswindows-phone-8internet-explorer-10

My .scss styles are getting jumbled up by Webpack

As I work with webpack, npm, and react.js, my style.scss stylesheet manages the styles of my project. However, I have been struggling to properly use classes and ids with it. The issue became clear when I noticed the transformation in my style.scss sheet: ...

javascripthtmlcssnode.jswebpack

Unable to successfully submit a form using PHP

I am currently working on a PHP page that retrieves data from MySQL. The goal is to fetch a list of objects from the database, display each object in a separate form for editing, and then save only the edited values. However, I am encountering difficulties ...

phphtmljson

Tips for implementing a CSS override for a block element's relative date

I am looking to customize this source code by using a CSS override to ensure that the "lightning-relative-date-time" element is not utilized. I want to keep it displaying the timestamp information by default. Can you guide me on how to achieve this throu ...

css