Help with website scaling

Hey,

So I’ve got no idea where I’m going wrong. I’m trying to recreate this website ‘’ https://www.free-css.com/free-css-templates/page196/conquer ‘’
After creating my HTML and adding all the images, I seem to struggle with fitting the website within the browser window. Most images are full size and I have to scroll to the right, which shouldn’t happen. I seem to have tried everything, went on stackoverflow and tried all of the below:
html, body, {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}

body {
height: 100%;
width: 100%;
}

div {
width: 100%;
height: 100%;
}

and the reset of margin and padding as well with *{ margin: 0; padding: 0;
all the images still go off the screen apart from the top image.
Heres my HTML code:

Website Clone
<div class="title"> <img src="img/bg-1.jpg" alt="" style="width:100%">
    <h1 class="text-p"> Conquer <p>Simple bootstrap template</p> </h1>
</div>

<div class="section1">
    <card-1 class="card">
        <img src="img/1-1.jpg" alt="">
        <h3>Bootstrap v3.3.6</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi et sed, enim ea vero totam! Ea rerum impedit totam, maxime, accusamus assumenda aspernatur! Ea ad fugit explicabo sed officia, repellendus.</p><button class="button">Button Green</button>
    </card-1>
    <card-2 class="card">
        <img src="img/1-2.jpg" alt="">
        <h3>Responsive Design</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita voluptatem consequuntur sunt magni. Suscipit dolores aperiam sit eveniet, neque quaerat nobis nemo placeat earum voluptas illum, pariatur consequatur minima minus vero incidunt quia consequuntur in distinctio excepturi, nam omnis error.</p><button class="button">See Details</button>
    </card-2>
    <card-3 class="card">
        <img src="img/1-3.jpg" alt="">
        <h3>Parallax Layout</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iure quas, quo error minus debitis, unde asperiores incidunt? Eius animi itaque provident enim a sapiente earum atque, corporis, quis totam!</p><button class="button">Button Red</button>
    </card-3>
</div>

<div class="section2">
    <section2-1 class="section2-card"><img src="img/2-1.jpg" alt="">
        <h3>Two Column Left Side</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel expedita, officiis reprehenderit placeat aliquam harum pariatur quia ab, minima debitis voluptatibus id, sit! Repudiandae laborum reiciendis et suscipit rem quod.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti ratione, earum et obcaecati voluptas illum repellat error hic, repudiandae ab! Quas soluta expedita delectus.</p>
    </section2-1>
    <section2-2 class="section2-card"><img src="img/2-2.jpg" alt="">
        <h3>Two Column Right Side</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus laborum omnis saepe soluta repellat, autem eum voluptatem non corporis, quos ipsum eius reiciendis, veniam repellendus quaerat nemo iure molestias. Facilis repellat rem distinctio quam, quia nam saepe asperiores! Dignissimos omnis explicabo neque praesentium dolorum dolores!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos autem, veniam nemo dolores ipsa libero repellendus quasi earum quam? Atque adipisci ullam, magnam eius quidem repellat itaque porro? Optio, nulla.</p>
    </section2-2>
</div>

<div class="section3"><img src="img/bg-2.jpg" alt="">
    <h2>Our Services</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam animi, veritatis sed ratione ipsa aspernatur adipisci similique ducimus. Quas, dignissimos.</p>
</div>

<div class="section4">
    <section4-1 class="card"><img src="img/4-1.jpg" alt="">
        <h4>Column One</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus maxime esse temporibus a vitae consectetur, expedita. A nisi, doloribus consequuntur.</p>
    </section4-1>
    <section4-2 class="card"><img src="img/4-2.jpg" alt="">
        <h4>Column Two</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, tenetur!</p><button class="button" id="column2-button">Read It</button>
    </section4-2>
    <section4-3 class="card"><img src="img/4-3.jpg" alt="">
        <h4>Column Three</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, maxime eaque tenetur veritatis officia ratione ad sed eos assumenda modi debitis iste ipsam.</p>
    </section4-3>
    <section4-4 class="card"><img src="img/4-4.jpg" alt="">
        <h4>Column Four</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores omnis possimus, doloribus molestiae.</p><button class="button" id="column4-button">Details</button>
    </section4-4>
</div>

<div class="section5"><img src="img/4-5.jpg" alt="">
    <h3>One Big Column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ea eum minima corporis, minus at eligendi, esse eos tempore rerum beatae voluptatem aperiam sed deleniti expedita eveniet sapiente accusamus fugiat voluptatibus quia consectetur ab tempora error voluptate. Sunt nam velit modi doloribus porro, obcaecati quisquam, ipsum ullam eligendi in, assumenda vero nostrum! Omnis ab, blanditiis accusamus et natus autem at.</p><button class="button" id="section5-button">Read More</button>
</div>

<div class="section6" id="form"> <img src="img/bg-3.jpg" alt="">
    <h3>Contact Form</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit hic cumque voluptas ratione voluptatum quaerat placeat neque, repellendus, incidunt vel.</p>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <button class="button" id="form-button">Send</button>
    </form>
</div>

<script src=""></script>

If you’ve got any tips on improving my HTML as well as CSS please feel free to share. :slight_smile:

@lesbrarianism just posted two wonderful links that could help you with this project in the Align Picture and Text Next to each other thread.

The two links are:

You will get familiar with the grid and flexbox with these links, if you aren’t already.

1 Like