[Effexion]

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)

[Faith Connors]

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.

[Disease]

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)

You have a container class on that DIV which puts a max-width rule of 1140px on it.  Is that intentional?  What you're seeing may be that max-width coming into play.  If you remove that class, does the DIV go full-width?

Also, you have a bad rule in your inline style on the BODY element.  "background-image='...url...'" is not valid CSS syntax.

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.

Please don't use the !important tag just like that.  It's unnecessary in this instance.  By specificity rules alone, if you apply a max-width property with a value of zero on the ID selector, it'll override the class selector's rule.  Generally speaking there's never a real need to use !important, unless you've been writing bad CSS.  Or you're having to correct bad CSS that already exists in your code base.