I've encountered an issue with the content on one of my pages not expanding to the full width of the page. Despite placing everything inside a container and setting the max-width of the container to 1500px, the content still doesn't extend all the way across the page.
Below is the code for the page:
<body>
<div id="wrapper">
<div id="banner-wrapper">
<!---Company Header-->
<header>
<div id="header">
<h1 class="main_header">Bracelets</h1>
<audio autoplay="autoplay" loop="loop" id="background-music">
<source src="music/Albinoni-adagio-in-g-minor-acoustic-guitar.mp3" type="audio/mpeg">
<source src="music/Albinoni-adagio-in-g-minor-acoustic-guitar.wav" type="audio/wav">
</audio>
</div>
</header>
<!---end of Company Header-->
<br>
<?php include_once("templates/template_navigation.php"); ?>
<br>
<br>
<br>
<!--Start Comment page Body Content-->
<div id="body-content">
<div class="bracelet_body">
<?php
for ($i=0; $i <sizeof($item_number) ; $i++) {
?>
<table width="100%" border="2" cellspacing="0" cellpadding="15">
<tr>
<td width="25%" valign="top">
<img src="pictures/inventory/<?php echo $item_number[$i]; ?>.jpg" width="180" height="188" alt="<?php echo $item_number[$i]; ?>" /><br />
<a href="pictures/inventory/<?php echo $item_number[$i]; ?>.jpg">View Full Size Image</a></td>
<td width="75%" valign="top">
<h3 class="Item"><?php echo $item_number[$i]; ?></h3>
<p>Price: <?php echo "$".$price[$i]; ?><br />
<br />
Description: <?php echo $desc[$i]; ?>
<br />
Category: <?php echo $category[$i]; ?>
</p>
<form id="form1" name="form1" method="post" action="cart.php">
<input type="hidden" name="pid" id="pid" value="<?php echo $item_number[$i]; ?>" />
<input class="button" type="submit" name="button" id="button" value="Add to Shopping Cart" />
</form>
</td>
</tr>
</table>
<?php
}
?>
</div>
</div>
<!--end of Comment body -->
<footer>
<div class="icon-text">
<div class="icon-text-text">
<ul class="footer-nav">
<li><a href="tearms.php">Tearms and Conditions</a></li>
<li><a href="shipping_info.php">Shipping Information</a></li>
</ul>
</div>
</div>
<div class="icon-text-icon">
<p class="email_text">Follow Me On</p>
<div class="social-icon">
<a href="#">
<img class="social-icon" src="icons/facebook.png" alt="Facebook" height="45" width="45"></a>
</div>
</div>
</footer>
<footer class="second">
<p>© All Rights Reserved</p>
</footer>
</body>
Despite setting the CSS for the wrapper to have a max-width of 1500px and min-width as well, I can't seem to figure out why it's not extending all the way to the right as intended. Any suggestions?
#wrapper {
max-width: 1500px;
min-width: 1500px;
}