Border has a hole in it

Hi all,

I’m currently working on the website design system project.

I’ve added some of my initial formatting; however, my border has a hole in it. The top right corner is missing its piece from the righthand side of the border. Does anyone know why this is happening? And how do I fix it?

Here’s a screenshot:

Here’s my CSS:

* {
    padding: 0;
    margin: 0;
    background-color: wheat;
}

h1 {
    position: relative;
    left: 7.5%;
    top: .20em;;
}

h2 {
    text-align: left;
    position: relative;
    left: 1%;
}

section {
    border: .14vh solid black;
    width: 85%;
    height: 1;
    margin: 1.5% auto;
}

.colours {
    text-align: center;

}

.colours p {
    display: inline-block;
    padding: 8%;
    width: 12%;
    height: 1;
    margin: 2%;
    text-align: center;
}

.orange {
    background-color: #FF8400;
}

.onyx {
    background-color: #454545;

}

.darkSkyBlue {
    background-color: #93B7BE;
}

.mintCream {
    background-color: #F1FFFA
}

.lightGrey {
    background-color: #D5D4D2;
}

And my HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>ATP Style Guide</title>
    </head>
    <body>
        <h1>ATP Style Guide</h1>

        <!--Colours Section-->
        <section class="colours">
            <h2>Colours</h2>
                <p class="orange">Orange<br>#FF8400</p>
                <p class="onyx">Onyx<br>#454545</p>
                <p class ="darkSkyBlue">Dark Sky Blue<br>#93B7BE</p>
                <p class="mintCream">Mint Cream<br>#F1FFFA</p>
                <p class ="lightGrey">Light Grey<br> #D5D4D2</p>
        </section>

        <!--Fonts Section-->
        <section>
            <h2>Fonts</h2>
        </section>

        <!--Text Styles Section-->
        <section>
            <h2>Text Styles</h2>
        </section>
    </body>
    <footer>
        
    </footer>
</html>

Thanks!

Hi,

Add a red border to this element and you’ll see the reason…

2 Likes

That moves the entire box, so may be overlapping the border. Try changing to,

margin: 0 1%;

Please show us the result.

1 Like

Thank you so much! I can see now:


The position: relative made the child box overflow right from the parent section.

@mtf – your solution worked without the unintended consequence. Thank you!

1 Like

Be sure to remove the left: 1% property.

1 Like

I did! Thank you. Looks like this now:

1 Like