Trouble Displaying Images in AWS S3: 404 Error Not Found - html

Question

I coded up my website with html and css in Dreamweaver. When I open the html documents locally on my computer, the images all load (everywhere, including on the Art/Design page). When I uploaded all of the files to AWS, only three out of the sixteen gallery images loaded (the 7th, 8th, and 9th). For each of the gallery divs, including the images in them, the code is identical. When opened in chrome, developer tools show the images which didn't load cannot be found (404 error). The images do not load through the direct url or my domain. Other images outside of the gallery loaded fine.
Here is the html:
<section id="full-width">
<div class="title2">
<p>Fine Art</p>
</div>
<section id="pictures">
<div class="column">
<div class="gallery">
<img src="Images/Gallery/1.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Eye</h>
<h1>2016</h1>
<p>Graphite on paper.</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/2.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Iris</h>
<h1>2016</h1>
<p>Hard pastel on paper</p>
</div>
</div>
... <!--skipping a few elements-->
<!-- The following three images load without fail-->
<img src="Images/Gallery/9.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Fahrenheit 451 Alternate Cover</h>
<h1>2013</h1>
<p>Spray paint on newspaper on canvas</p>
</div>
</div>
</div>
<div class="column">
<div class="gallery">
<img src="Images/Gallery/12.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Glint</h>
<h1>2015</h1>
<p>Acrylic on illustration board</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/10.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Impressionist Self-Portrait</h>
<h1>2015</h1>
<p>Soft-pastel on illustration board.</p>
</div>
</div>
<!-- the following, again, do not load -->
<div class="gallery">
<img src="Images/Gallery/8.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Self-Portrait: Creation</h>
<h1>2016</h1>
<p>Graphite on paper</p>
</div>
</div>
... <!-- skipping more elements -->
</div>
</div>
</div>
I don't understand how some images can load and others cannot. The images which load are not the smallest sized images of the group, and neither is there anything which sets them apart.
Bonus question: why can't my error.html page load the stylesheets? (Again, Chrome claims 404 error, cannot be found)?