I am using CSS grid to layout a webpage and there are three grid - header, maincontent, and footer.

The maincontent grid and the footer grid have equivalent properties yet they do not align with each other, for some reason:

The photo on the top should be left aligned with the blue section in the footer yet they clearly are not (picture taken in Edge, same outcome in both Chrome and Firefox).

/* PAGE CONTENT LAYOUT */
.gridcontent {
    display: grid;
    grid-template-columns: 5vw 20em 3fr 5vw;
    grid-template-rows: 20em auto; 
    /* align-items: center; */
    background-color: white;
    /* Add margin to space the content from the header */
    margin-top: 2em;
    /* Aligns the cell contents at the top */
    align-self: start;
    border: 0.25em black solid;
}

.gridconentleft {
    grid-column: 2;
}

.gridcontentright {
    grid-column: 3;
}


/* PAGE FOOTER */
.pagefooter{
    display: grid;
    grid-template-columns: 5vw 20em 3fr 5vw;
    grid-template-rows: 7.5em; 
    margin-top: 5em;
    border: 0.25em green solid;
}

.pagefootercopy {
    grid-column: 2;
    background-color: #132257;
    color: white;
    text-align: center;
}

.pagefootercontact {
    grid-column: 3;
    font-size: small;
    text_align: left;
}

<div class="gridcontent">
            <div class="gridcontentleft">
                <img src="images/dermotatflorence.png" alt="Dermot Nolan Master of Wine">
            </div>
            <!-- END CONTENT LEFT -->

            <div class="gridcontentright">
                <h1>Dermot Nolan, Master of Wine</h1>
                <h2>Curriculum Vitae</h2>

                <br>

                <p>
                Hello, my name is Dermot Nolan and this is my online curriculum vitae (CV).
                </p>

                <br>

                <p>
                On these pages I have information about who I am, my education and employment,
                 the hobbies which I enjoy and how to get in touch.
                </p>


            </div>
            <!-- END CONTENT RIGHT  -->

        </div>
        <!-- END CONTENT -->


        <div class="pagefooter">
            <div class="pagefootercopy">
                <h1>&copy; 2021</h1>
                <p>
                Dermot Nolan MW
                </p>
            </div>
            <!-- End COPYRIGHT -->

            <div class="pagefootercontact">
                <br>
                <p>Please, feel free to <em><a href="mailto:[email protected]?subject=Web CV contact">email me</a></em> right now, if you like. </p>
                <p>Have a look at <em><a href="http://www.dermotnolan.ie" title="Go to my website">my website</a></em> if you want. </p>
                <p>Have a look at my <em><a href="https://www.linkedin.com/in/dermot-nolan-mw" title="Go to my LinkedIn">LinkedIn</a></em> page.</p>
            </div>

        </div>
        <!-- END FOOTER -->

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

There is no padding or margin being used and I can see no reason why the two elements maincontentleft and pagefootercopy are'nt left-aligned.

Frequently, the solution is something simple which I can no longer spot, so I'd be grateful for any suggestions. If more code is required please let me know.

CodePudding user response：

One thing you can try is: right click on the image you want to align differently, select Inspect Element and then use the Select Element button pictured below to select your image. You can then check if the image has any margin, padding or border on it.

In the event there is margin and/or padding on one of the elements, you can use the following CSS to access and change Margin:

margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;

Padding:

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

CodePudding user response：

Would you believe it weas a simnple spelling error - in the CSS I had "gridconentleft" instead of "gridcontentleft" - that missing t caused all the problems! Thanks for the responses.