Bootstrap 5 img-fluid working on firefox but not chrome

Question

So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px) The div #content is inside a div with .container-fluid

this is how it looks on chrome

this is how it looks on firefox

<div id="content" class="container">
            <div id="Home" class="container mx-auto">
                <div id="title">
                    <p>a tribute to</p>
                    <h1>Joan Didion</h1>
                    <p id="date">1934 - 2021</p>
                    
                </div>
                
                <div id="head-img">
                    <figure>
                        <img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
                        <figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
                    </figure>
                    
                </div>
                <div id="description">
                    <figure>
                        <blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
                        <figcaption><a href="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">Why I Write</a></figcaption>
                    </figure>
                    
                </div>
            </div>

edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio. I will edit the code so you can see the following section because i still dont know why it's causing the issue

/*I'll take away the css because none of it proved to be an issue*/

<div class="container-fluid">
  <!-- there's a nav div here but it doesnt cause issues-->
  <div class="container-fluid" id="content">
    <div id="Home" class="container mx-auto">
                <div id="title">
                    <p>a tribute to</p>
                    <h1>Joan Didion</h1>
                    <p id="date">1934 - 2021</p>
                    
                </div>
                
                <div id="head-img">
                    <figure>
                        <img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
                        <figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
                    </figure>
                    
                </div>
                <div id="description">
                    <figure>
                        <blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
                        <figcaption><a href="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">Why I Write</a></figcaption>
                    </figure>
                    
                </div>
            </div>
            <!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
            <div id="Bio" class="container">
                <div id="summary">
                    <h1>Her life</h1>
                   <div class="achivement">
                    <ul>
                        <li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's 
                        New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
                    </ul>
                    <blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
                        <p>
                        " Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
                        </p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
                    </blockquote>
                    </div>
                    
                <figure>
                    <img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
                    <figcaption>Didion by Irving Penn.</figcaption>
                </figure>
            </div>
</div>
  </div>
</div>

Answer 1

So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.

Answer 2

Try adding the rule in your css file:

 <style>
     figure .img-fluid {
         width: 100%;
     }
 </style>

I'm pretty sure it will work for you.