Spoiler (Click to View)

(Jul 13, 2019 06:47 AM)Effexion Wrote:  I am trying my hardest to get this container going right the way across the the bottom of my page but no matter what I do I can't get it any wider than it already is. I've tried 100%, auto; 2000px etc and nothing seems to work. Here be my code:

PHP Code


<?php 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background: url("images/padded.png");
        }
        
        #img-div {
            background-image: url("images/micro_carbon.png");
            height: 300px;
            width: 300px;
            margin-top: 50px;
            margin-right: 50px;
            float: right;
            border-style: solid;
            border-color: aqua;
            
            
        }
        
        #div-notes {
            background-image: url("images/micro_carbon.png");
            width: 100%;
            height: 250px;
            position: fixed;
            bottom: 40px;
            right: 10px;
            left: 10px;
            border-style: solid;
            border-color: aqua;
            
    
        }
    </style>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
   <title>Add</title>
           `
</head>
<body style="background-image='images/dark-honeycomb.png'">
  
  <div class="container" id="img-div">
      
  </div>
 
   <div class="container" id="div-notes">
       
   </div>  
</body>

</html> 


Large image (output):
Spoiler (Click to View)

(Jul 13, 2019 02:37 PM)Faith Connors Wrote:  just need to use your dev console:)
grid.scss (from bootstrap that you have in your link tag) forces max-width in like four places. take those out and boom, you can make it wider.
else, force max-width property and add !important to it.