Home Empty buttons appearing in console and on webpage that isn't in the html file

Questions

Empty buttons appearing in console and on webpage that isn't in the html file

February 25, 2022

I’m seeing two buttons with no text in them on a page. The buttons do not appear in the code I wrote nor in the source code of the page.

When I check the console/use inspect element, I see two <button> tags with a space in between the opening tag and end tag.

I tried running it in JSFiddle instead and am getting the same thing so I doubt its on my end.

I’m confused as hell and would some appreciate help.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Clicker Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <div>
            <h1 class="title">Clicker Game</h1>
            <h2 class="title">Level: 0</h2>
            <h2 class="title">Skill Points: 0</h2>
        </div>
        <div>
            <div id="skillsContainer">
                <button id="strength" onclick="strength()"><p class="center"><strong>Strength</strong></p><button>
                <button id="expandButton" onclick="expandSkills()"><p class="center"><strong>Expand</strong></p></button>
                <button id="minion" onclick="minion()"><p class="center"><strong>Minion</strong></p><button>
            </div>
            <button id="xpButton" onclick="xpAdd()"><p class="center"><strong>Click Me!</strong></p></button>
        </div>
    </div>
</body>
</html>

CSS:

.title {
    display: flex;
    justify-content: center;
}
#xpButton {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-top: 100px;
    margin-right: 15%;
    cursor: pointer;
    height: 150px;
    width: 150px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
#xpButton:hover {
    background-color: green;
    color: white;
}
.flex {
    display: flex;
}
#skillsContainer {
    margin-left: 350px;
    margin-top: 0px;
}
#strength {
    height: 100px;
    display: none;
    margin-top: 175px;
    cursor: pointer;
}
#minion {
    height: 100px;
    display: none;
    margin-top: 175px;
    cursor: pointer;
}
#expandButton {
    height: 100;
    display: flex;
    cursor: pointer;
}
.center {
    display: flex;
    margin: auto;
}