The navigation bar and footer are not utilizing the entire width of the browser

Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks!

Here's the snippet of my HTML code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Elysian</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <div class="row">
        <div class="col-md-9">
          <img src="assets/white logo.png" class="logo" alt="logo">
        </div>
        <div class="col-md-1">
          <a href="#" class = "header-heart-icon"><i class ="fa fa-heart-o"></i></a>
          <p id="header-wishlist"><a href="#">Wishlist</a></p>
        </div>
        <div class="expand">
          <p id="header-cart">Shopping List</p>
          <p id="cart-item"> Chloé [1] $14,200</p>
          <p id="cart-item"> Aquazzura [1] $4,425</p>
          <hr>
          <p>TOTAL</p>
          <button type="button" class="btn btn-dark">Check Out</button>
        </div>
      </div> 
        <!-- Add the hover to shopping list-->
    </header>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
      ...
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Below is a snippet of my CSS code:

body {
...
}

ul.breadcrumb {
...
}

...

.footer {
...
}

...

@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}

@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

I've already attempted setting the body width to 100% and margin to 0, but the issue persists. Any suggestions on what could be causing this?

Answer №1

Before proceeding, double-check that the navbar and footer do not have any unwanted margin or padding:

.navbar,
.footer {
    margin: 0; 
    padding: 0;
}

Next, be sure to explicitly define the widths for the navbar, content area, and footer:

.navbar, 
.content,
.footer {
    width: 100vw;
}

Alternatively, consider including overflow: hidden in your styles:

.navbar,
.footer {
    overflow: hidden;
}

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

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

Adjust CardMedia Images to match their content in the new MUI 5 version

I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...

The CSS within the WebComponent nesting is not valid

Upon testing, I have found that writing CSS directly using nesting is effective. However, when used within a WebComponent and nested with the :host selector, it becomes invalid. Below is a demo code snippet showcasing this issue. My Chrome version number i ...

What is the best way to duplicate a tag that contains multiple other tags with attributes?

My form, named 'myForm', needs a div tag with the id 'original' to be added every time I click a button. Can someone help me figure out how to add these tags? The new tags should appear after the original one, but still within myForm. ...

Having trouble retrieving image files from CSS within a Spring MVC Application

I am facing an issue with my Spring MVC application where I cannot get an image to display in a CSS file accessed from a JSP file. The CSS is working fine, but the image just won't show up. It seems like there might be an issue with how I am addressin ...

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How c ...

The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...

What could be the reason behind the failure of my inner div to successfully implement the flex-row

I'm currently trying to position two divs next to each other horizontally, and my concept was to utilize flexbox, but including the property flex-row doesn't seem to yield any results and I can't comprehend the reason behind it. How can I a ...

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

Place the image at right:0px position, but it won't display

I am trying to position an image at the end of a sentence within a div element. No matter what I try, the image always appears next to the end of my text. Here is the code I am using: <div id='xi' class='xc'>Text comes here and ...

Update the style dynamically in Angular using an ngFor directive and an array of data

Is there a way to dynamically set the width using data from an array in Angular? The usual approach doesn't seem to work. How can I solve this issue? <div *ngFor="let item of products"> <div [style.width.px]="item.size" class="Holiday"&g ...

Tips for implementing a document ready function on a nested page within a larger full-page website

I am currently working on a website that utilizes fullpage.js, but the same principle applies to all single-page websites. I am trying to figure out how to implement the $(document).ready() function on a 'nested' page within the site. Since every ...

Ways to avoid divs overlapping on a mobile device?

If you visit this page: The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue? ...

Redirect the Submit button to the specified URL from the form element

Looking for a way to create a form with two fields: Username and Password. Upon clicking submit, the username and password should be added to the URL in a specific format. For instance: The URL structure will remain the same, only the "username_entered_i ...

Exploring json data with angularjs

I am facing a challenge with handling a complex JSON object by looping through it and displaying the data in a form. To tackle this, I have created a small service similar to the one shown below: service.myApprovalResults = function(){ var url = " ...

Limit access to a page only to designated users

Having a challenge creating a secure page for band members to access their individual band pages. In the band table, each band has four columns labeled $bandm1, $bandm2, $bandm3, and $bandm4. I attempted to create a script that extracted the session user ...

Unable to hear sound on Mozilla Firefox

I am facing an issue with playing an audio file using the audio tag inside the body element. The audio plays perfectly in Chrome once the body has finished loading, but it fails to play in Mozilla Firefox. I even attempted to download the audio file and pl ...

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...