HTML elements not changing size with screen size changing-CodePudding

My HTML elements are not changing size when the screen size changes, width is set at 100% for all elements. it works for my header but not my background image on the main part of the page. nor does it work with any of the elements below the header with the exception of the map picture under locations. code below, not sure what to do.

<!DOCTYPE html>
<html>
    <head>
        <title>Brick Brigade</title>
        <link rel="stylesheet" href="./companyhomecss/companyhome.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Source Code Pro&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <div >
                <h1>Bricks Brigade</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Review</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div >
                <div >
                    <div >
                        <h2>Find the perfect fit for your house.</h2>
                        <p>Browse our brick selection today!</p>
                        <a href="#">Browse Bricks</a>
                    </div>
                </div>
            </div>
            <div >
                <h2>Bricks</h2>
                <h2>Lumber</h2>
                <h2>Shingles</h2>
            </div>
            <div >
                <h2>Locations</h2>
                <img src="./companyhomepics/GoogleMapTA.webp" alt="Locations">
            </div>
            <footer>
                <div ></div>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                    <li>Shop</li>
                    <li>Leave Review</li>
                </ul>
            </footer>


        </main>
    </body>
    
</html>

CSS

/* Universal */
html {font-size: 16px;}
body {margin: 0px; padding: 0px; font-family: 'Source Code Pro', monospace;}


/* Header */
header {background-color: black; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; z-index: 1; border-bottom: 1px solid gray;}
.title {color:whitesmoke; position: relative; left: 50px; font-size: 1rem;}
nav ul {color: whitesmoke; position: relative; right: 50px;}
nav li {display: inline; background-color: gray; padding: 5px 10px;}
nav a {text-decoration: none; color: whitesmoke;}
nav li:hover {background-color: lightgray; color: gray;}
nav a:hover {color: gray;}

 /* Main picture */
 .titlepic1 {width: 100%}
 .titlepic {display: flex; 
    position: relative; 
    top: 83.276px; 
    background-image: url(../companyhomepics/brickangle.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    height: 35rem; 
    width: 100%;
    justify-content: center;
    align-items: center; border-bottom: 2px solid black; flex-direction: column;}
.titlepic .box {background-color: black; padding: 12px; height: 200px; width: 400px; position: relative; right: 350px; bottom: 45px;
    border-radius: 5px; border: 2px solid gray; text-align: center;}
.titlepic h2 {color: whitesmoke; }
.titlepic a {color: whitesmoke; text-decoration: none; background-color: gray; padding: 20px 15px; position: relative; top: 15px;}
.titlepic a:hover {color: gray; background-color: whitesmoke;}
.titlepic p {color: whitesmoke; }

/* Options */
.options {position: relative; top: 70px; display: flex; justify-content: space-around;}
.options h2 {padding: 50px; background-color: gray; color: white; display: inline-block; border: 2px solid black; }

/* Locations */
.location {position: relative; top: 50px; display: flex; flex-direction: column; }
.location h2 {background-color: black; color: white; padding-left: 25px; padding-right: 25px; margin-left: 8px; margin-right: 8px;}
.location img {align-self: center;}

footer {position: relative; top: 60px; padding-bottom: 20px;}
footer .footer {background-color: black; display: block; width: 100%; height: 30px; margin-left: 8px; margin-right: 8px;}




Tried width at 100%.

CodePudding user response：

add this in your css file or change your body style to this

body{
width: 100%;
}

CodePudding user response：

hey bkezk if you like to change the element with change screen size you first learn responsive design in css you can search in w3school about @media query and read about it and solve your problem .