In need of a solution for the blank space issue in my HTML/CSS slideshow. How can I

I am experiencing an issue with my slideshow where there is a blank area on the right side. I have tried several solutions but haven't had much success resolving it. Any suggestions would be greatly appreciated. Thank you!

Link to image

JSFiddle link

<html>
  <head>
    <title>A.Willi A.G - Fachkräft für Rohr-Stahl Gebäudetechnik</title>
    <meta charset="utf-8">
    <!-- Other meta tags and links -->
  </head>

  <body>

    <div class="container">
      <div class="menu">
        <ul>
          <li><a href="/html/index.html">Home</a></li>
          
          <!-- Rest of the menu items -->

        </ul>
      </div>

      <h2>
        <div class="slideshow"> 
          <img src="/images/panorama2.JPG" alt="Panorama">
          <img src="/images/panorama3.png" alt="Panorama">
          <img src="/images/panorama3.png" alt="Panorama">
        </div> 
      </h2>

      <section>
         <h4>A.Willi A.G für Menschen zur Stelle</h4>
         Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tätig mit über 30-jähriger Erfahrung in dieser Sparte.
      </section> 

      <footer class="footer-distributed">
        <!-- Footer content goes here -->
      </footer>  
    </div>

  </body>
</html>

Blockquote

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

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

How can Selenium and Python be used to refresh a webpage until a specific item is found?

I'm attempting to continuously refresh the page until a specific item appears, but my current code is not working. I took inspiration from this solution: python selenium keep refreshing until item found (Chromedriver). Below is my code snippet: whil ...

Creating a dual-row HTML table heading

Looking to create a table with a two-row header - the first row containing a search input box and the second row containing column names. Here's what I have so far: <thead> <tr class="bg-primary"> <th colspan="5"> ...

Tips for customizing the appearance of a chosen radio button

Here is my HTML code snippet: <div class="col-md-12 money-radio-container"> <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span> <input type="radio" name="optradio" class="money-radio" val ...

Creating a simulated dropdown menu using only CSS

I was able to create a select menu using only CSS, following some code I found. However, I am now facing an issue with overlaying divs. Whenever I hover or click on the "select menu", all the divs below it move down. I've attempted to adjust the z-i ...

Ensure that all items are centered while positioning one in the corner

Lately, I've been diving into the world of flexbox and trying out new things. However, there are still some concepts that elude me. My current project involves creating a straightforward layout with three flex items (children). The container is confi ...

Display the HTML tag inside a cell of a mat-table

I am currently exploring options to display an HTML tag within a cell of a mat-table in Angular. My goal is to show a colored circle next to the cell value. I have searched online for solutions, but haven't found one that works. If anyone has any insi ...

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

How to use jQuery to set a background image using CSS

I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet: $(document).ready(function () { $(".VociMenuSportG").each(function () { ...

What is the best way to title an uploaded chunk with HTML5?

Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

Is it Possible to Customize the Appearance of a Broken Link Using CSS?

Can you change the color of broken links on your site to distinguish them from working ones? For example, making working links blue and broken links red. If CSS is not an option, is it possible to use JavaScript to detect broken links and style them diffe ...

How can I apply a shadow effect to a <View> element just like a regular tab bar?

My customized navigation bar is using the <View> element. https://i.sstatic.net/QA8Ad.png Is it possible to add a bottom shadow similar to the default react-navigation bar (refer to the image below)? https://i.sstatic.net/ORD8J.png I find it chal ...

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

I have integrated the owl-date-time module into my application to collect date-time parameters in two separate fields. However, I am encountering an issue where the value is being returned in a list format with an extra null value in the payload. Additiona ...

Present the value of an object within an array in an HTML format

I have organized an array containing information about different video games: let games = [{ title: 'Fortnite', price: 20, img: "./assets/images/Fortnite.jpg" }, { title: 'Valorant', price: 0, img: "./asse ...

Only the Backdrop is triggered by Bootstrap Modal

I've been struggling to figure out why the bootstrap modal is not showing up after hours of troubleshooting. All the files and syntax seem correct, as I have compared them with another working site where the modal functions perfectly. I even disabled ...

Top method in css for removing the corners of a border

I'm working on a video project where I've added text overlay. The design I'm aiming for includes having the corners of the border cut out. To better illustrate, here's an image showcasing what I want to accomplish: Is there a straightf ...

What could be causing my jQuery to not function on a separate domain?

Two of my websites have the same code, but one is functioning correctly while the other seems to be having trouble with the jQuery functions <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;char ...