Question 215271 in CSS Question posted in
Some basic documentation can be found here.

Css – Can't figure out why divs are uneven and don't fill page

https://zmc27.github.io/resumetemp/
Coder-in-training here. If you check out my site and use the horizontal scroller, you’ll notice that the "My Work" div extends further out than the others, leaving an awkward white gap on the side of the page; I’m trying to figure out why this is happening and how to fix it. I’ve also been having trouble trying to get the flexbox column centered (these two issues could be related). Any help will be much appreciated!

.page3 {
    background-image: linear-gradient(#EDE4E0, #C8DBBE) ;
    position: relative;
    padding: 0%;
    margin: -20;
    
}
.fit{
    height:200px;
    width:200px;
    object-fit: cover;
    border: double;
    
}

.work{
    display:flex;
    gap:30px;
    padding-bottom: 70px ;
    flex-wrap: wrap;
    
}
.worktxt{
    font-family: 'Montserrat', sans-serif; 
    font-size: 50px;
    margin-top: 0px;
    padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 0px;
    letter-spacing: 3;
    
    color: 61764B;
}
p{
    font-family: 'Montserrat', sans-serif;
    word-break: break-all;
}
 <section class="container3">
            <div class="page3">
                <div class="page3title">
                    <h2 class="worktxt">My Work</h2>
                </div>
                <div class="work">
                <div class="boxes">
                    <a href="/11.3 TinDog Project/index.html"><img  class= "fit" src="./assets/tindog.png"></a>
                    <h3 class="workheader"> Tindog </h3>
                    <p>A class project built using bootstrap.</p>
                </div>
                <div class="boxes">
                    <a href="/10.3 Mondrian Project/index.html"><img class= "fit" src="./assets/mondrian.png"></a>
                    <h3 class="workheader">Mondrian Painting</h3>
                    <p>A class project that is constructed entirely by CSS Grid.</p>
                </div>
                <div class="boxes">
                    <a href="/Capstone 2/index.html"><img class= "fit" src="./assets/portfolio.png"></a>
                    <h3 class="workheader">Portfolio</h3>
                    <p>My personal project designed using HTML and CSS.</p>
                </div>
                </div>
            </div>
        </section>

Simply trying to make the website look aligned. If any more info is needed LMK.

Tags:

2

Answers


  1. 0

    Your My Work div is extending out beyond the edge of the page because you’ve got margin: -20 in the .page3 declaration. Remove that and it won’t overflow.

    I’m assuming you also want to remove the whitespace between the section elements? It’s the margins on the h2 and h3 elements that is causing those. Specifically, the h3 containing "To learn about me, my experience, and my proficiencies, click the photo!" and the h2 containing "Get in touch".

    To centre your flexbox items, add justify-content: center; to your .work declaration.

    Hope that help. Welcome to the site. 🙂

    Login or Signup to reply.
  2. 0

    Try to use justify-content: center; and justify-items: center; properties with flex layout for the work div section. and also given a width for the div word same as other sections.

    .page3 {
    background-image: linear-gradient(#EDE4E0, #C8DBBE);
    position: relative;
    margin: -20 -0 -20 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

    Please try this solution. And learn more about flex layout in CSS. Ad the issue was you have given padding top,left,right and bottom. that’s why you face that issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search