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>
        <link rel="stylesheet" href="style.css">
        <title>ATP Style Guide</title>
        <h1>ATP Style Guide</h1>

        <!--Colours Section-->
        <section class="colours">
                <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>

        <!--Fonts Section-->

        <!--Text Styles Section-->
            <h2>Text Styles</h2>



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


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