Why are my menu and title shifting as I adjust the page size?

I'm having trouble finalizing my menu and headings. Whenever I resize the browser window, they shift to the right instead of staying centered as I want them to. I would really appreciate any help with this. Below is the HTML and CSS code.

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 2000);
}
@charset "UTF-8";

/* CSS Document */

body {
  width: 100%;
  margin: 0, auto;
}

body {
  min-width: 100px;
}

body {
  background-color: rgba(255, 255, 255, 1.00)
}

body,
h1,
h2,
h3,
p {
  font-family: "Verdana", sans-serif;
}

h1 {
  font-size: 3em;
  text-align: center;
  font-weight: lighter;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
}

h2,
h3 {
  font-weight: normal;
}

h2 {
  font-size: 1.3em;
  text-align: fixed;
  margin-right: 600px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 339px;
  font-family: "Verdana", sans-serif;
}

h3,
p {
  font-size: 1em;
  font-family: 100% "Verdana", sans-serif;
  margin-left: 339px
}

ul {
  font-size: 1.2em;

...

menu li:hover .sub-menu {
  z-index: 6;
  opacity: 2;
}

.sub-menu {
  width: 171px;
  padding: 0px 0px;
  position: absolute;
  top: 44px;
  left: 1px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 1.00);
  height: 349px;
}

.sub-menu li {
  display: block;
  font-size: .7em;
  color: rgba(135, 135, 135, 1.00);
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
  background-color: rgba(231, 231, 231, 1.00);
}
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
            <link rel="stylesheet" href="../../Xavier website styles.css">
    </head;

<body>
        <header>
        <h1><a href="../../Xavier home:portfolio page.html">Xavier King</a></h1>
   </header>

        <div class="menu-wrap">
    <nav class="menu">
      <ul class="clearfix">
          <li><a href="../../Xavier home:portfolio page.html">Portfolio&nbsp;</a></li>
            <li>
                <a>Projects <span class="arrow">▼</span></a>&nbsp;<ul class="sub-menu">
                    <li><a href="../freedom/freedom.html">Are We Free?</a></li>
...
</body>
</html>

javascriptjqueryhtmlcss

Answer №1

Consider:

.menu {
  width: 720px;
  min-width: 720px;
  margin: 0 auto;
}

This method centers the .menu similar to using text-align: center.

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 2000);
}
@charset "UTF-8";

/* CSS Document */

body {
  width: 100%;
  margin: 0, auto;
}

body {
  min-width: 100px;
}

...

<!doctype html>
<html>
    ...
</html>

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

Say goodbye to <!DOCTYPE html> when using htmlAgilityPack

I'm currently developing an app for WP 8.1, and one of the tasks I need to accomplish is parsing a webpage with the following structure: <!DOCTYPE html> <html> <body> <table cellspacing="0" cellpadding="0" border="0" style="b ...

c#htmldomhtml-agility-packwindows-phone-8.1

Issue with API showing return value as a single value instead of an array

My database consists of collections for Teachers and Classes. In order to fully understand my issue, it's important to grasp the structure of my database: const TeacherSchema = new Schema( { name: { type: String, required: true } ...

javascriptnode.jsexpressasync-await

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

I'm currently working on a Django application and utilizing AngularJS for my frontend. I have a straightforward piece of code that looks like this: <div class="vert-carousel" ng-controller="PrizeController"> <div class="gallery-cell" n ...

javascriptangularjsdjango

The colgroup tag is present in the code, but strangely absent from the view source or debugger tool

In a curious twist from this question Why does Firebug add <tbody> to <table>?, I have encountered a similar issue that may lead to the same answer, but I am seeking confirmation. Within my code, there is a colgroup element that mysteriously d ...

c#htmlhtml-tablecolgroup

Utilizing Rails for dynamic form validation with AJAX

As someone who is new to jQuery, AJAX, and JavaScript in general, I am facing a challenge with front-end validation for a Rails form that utilizes an ajax call to query the server. The validation works fine when I am debugging, giving enough time for the A ...

javascriptjqueryruby-on-railsajax

What steps are necessary to activate javascript in HTML for WebView?

I recently discovered that when my HTML/JavaScript site is visited via an Android webview, JavaScript is disabled by default. This causes a pricing list on my page to not display properly because it requires a JavaScript class to be added for it to open. I ...

javascriptandroidjqueryhtmlwebview

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

javascriptjqueryhtmlcssinternet-explorer

Help with jQuery .each(): ensuring completion before running subsequent lines of code

I am facing an issue with a jQuery function that is supposed to fetch data from the third column of a table, perform some operations on it, and then update the field with the result. Below is the code snippet in question: function getData() { $(&apo ...

jquery

Is it possible in HTML to detect *any* changes made to an input, not just those made by the keyboard?

Let's consider a scenario where we have an input element like this: <input id="myInput" type="text" /> The question now arises, how can we detect when the value of this input is changed programmatically (such as through $("#myInput").val("new ...

javascripthtmldom

Retrieve the chosen option from a Select Dropdown and display it in a modal before carrying out the form submission

I need help figuring out how to send a warning message when a "delete" button is clicked on my webpage. I want the message to appear in a modal and display the selected value from a dropdown menu. Here is the code I have so far: <form action="elim ...

phphtmlformsbootstrap-5

Tips for detecting when the scrollbar disappears during a webpage load in Selenium

Encountering a problem with the page loader during the automation of a web application. The scrolling bar is clicking on all Web elements while each page loads. How can I wait until the scrolling bar disappears? Your suggestions are appreciated. https:// ...

javascriptjsonseleniumloader

Ways to create unique hover effects for images in a filter gallery

I recently downloaded a filter gallery from this link and while everything is working fine, I noticed that the hover effect remains the same for all images. The code snippet responsible for this hover effect looks like this: <div class="portfolio"> ...

jqueryhtmlcssimagehover

Shuffle math calculations involving subtraction by a percentage using node.js or JavaScript

Hello there! If you want to subtract, say 35%, from a number, you can use methods like this: var valueInString = "2383"; var num = parseFloat(valueInString); var val = num - (num * .35); console.log(val); But have you ever wondered how you could randomiz ...

javascriptnode.js

Updating a class within an AngularJS directive: A step-by-step guide

Is there a way to change the class (inside directive) upon clicking the directive element? The current code I have updates scope.myattr in the console but not reflected in the template or view: <test order="A">Test</test> .directive("test", ...

javascripthtmlangularjsangularjs-directive

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

javascriptnode.js

The find element will yield an empty result when using XPath contains with Text() method

When checking for Gender and Date in the assertion, it returns false and the IWebElement displays an empty string. This anomaly only occurs with Gender and Date, while the rest provide accurate results. CODE IWebElement actualname = BrowserHelper.WebDri ...

c#htmlseleniumselenium-webdriverxpath

What is the best way to confirm if a specific input is included in a JSON array?

This data belongs to me Each time a user inputs a code, it must be unique. If the value already exists, an error message should be displayed indicating that the branch code already exists. branches: [ { code: "test", na ...

javascriptvue.js

Webmatrix - Retaining query parameters throughout the website's pages

After successfully implementing pagination on my search page, I ran into an issue where the query strings used to build the search query are lost when transitioning between pages. Is there a simpler way to retain these query strings, or will I have to delv ...

jqueryrazorwebmatrix

Create engaging text animation by transitioning from horizontally displayed text to vertically displayed text with the letters standing upright using An

I'm trying to create an animation where an acronym is displayed horizontally in the middle of the screen and then flips vertically. The challenge I'm facing is rotating individual letters once they are vertical so that the text reads from top to ...

htmlcssjquery-animate

With jQuery fadeout, hyperlinks remain visible even after being clicked on

<a target="_blank" href="https://example.com"> <img class="bcvc_ad1" src="http://bdeas.com/wp-content/uploads/2015/08/ad1.jpg" alt="ad1" width="80" height="80" /> & ...

jqueryhtmlcss