CODEWITHSUNDEEP
htmlcss
Warriorsfury
Warriorsfury

Reputation: 65

Using the 100% width of a webpage

I'm trying to get these four div elements to span across a width of 100%. I've tried doing width: 100%, width 100vw, and some random other things. Any ideas?

Heres my code:

    #containerone {
    width: 100%;
    height: 500px;
    background-image: url('img/contentbackground.png');
    position: relative;
    margin: 0 auto;
    z-index: 1;
    }
    #containertwo {
    width: 100%;
    height: 500px;
    background-image: url('img/contentbackground2.png');
    margin: 0 auto;
    margin-top: 300px;
    position: relative;
    }
    #containerthree {
    width: 100%;
    height: 500px;
    background-image: url('img/contentbackground.png');
    margin: 0 auto;
    position: relative;
    margin-top: 300px;
    }
    #containerfour {
    width: 100%;
    height: 500px;
    background-image: url('img/contentbackground2.png');
    margin: 0 auto;
    position: relative;
    margin-top: 300px;
    }



 <!doctype html>
    <html>
     <head>
     <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>My Portfolio</title>
            <meta name="description" content="Portfolio">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="style.css">
        </head>
    <body>


        <div class="fullscreen-bg">
            <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                <source src="city.mp4" type="video/mp4">
            </video>
        </div>
        <div id="containerone">
            <div id="header">
                <p></p>
                <h1>Warriorsfury</h1>
                <h3>Front-end Developer</h3>
            </div>
            <p id="CO">Here you will find all the things i've been doing.</p>
            <p id="secondCO">And all the other things I want to learn to do.</p>
        </div>
        <div id="containertwo">
            <p>This is just some filler text!</p>
        </div>
        <div id="containerthree">
            <p>This is just some filler text!</p>
        </div>
        <div id="containerfour">
            <p>This is just some filler text!</p>
        </div>
    </body>
    </html>

Upvotes: 0

Views: 99

Answers (1)

puqeko
puqeko

Reputation: 321

Try adding:

body {
    margin:0;
}

...to your CSS. Margin is typically added by default.

Upvotes: 1

Related Questions