Unwanted CSS styling is being applied to my div?-CodePudding

This is quite the opposite of 'styling NOT being applied,' but I have no styling for this div, but it is still getting styling?

I am working on a new website for my father's business making the website with HTML, CSS, and JavaScript. I have this page that has an area where he can add his own listings to the site (not relevant to the problem however). The container at the very top has a blue border (circled in a screenshot below), much like the other containers have (which these one are specified to have it), but there is not styling to make this container have a blue border. I had checked to make sure all CSS and HTML is closed, and that seems to be the case. I have no idea what is happening here. Also, the unwanted border is pushing the second link inside of it out? Why?

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/x-icon" href="/images/icon.ico"/>
    <link rel="stylesheet" type="text/css" href="/styling/css_reset.css"/>
    <link rel="stylesheet" type="text/css" href="/styling/navigation_bar_and_body.css"/>
    <link rel="stylesheet" type="text/css" href="/styling/web_editor_styles.css"/>
    <title>Website</title>
</head>
<body>
    <article id="web_editor_article">
        <div id="editing_options">
            <a href="/index.html" id="add_machine_listing">Add machine listing</a>
            <a href="/index.html" id="edit_machine_listing">Edit machine Listing</a>
        </div>

        <!--Based on what editing option is selected, JavaScript will change the layout-->
        <div id="add_machine_listing">
            <div>
                <h1>Add a machine listing</h1>
                <input type="text" placeholder="Enter Full Machine Name" id="machine_name"/>
                <input type="text" placeholder="Enter Machine Price (Exclude $, include commas)" id="machine_price"/>
                <textarea placeholder="Enter a very short description of the vehicle (use commas for professional format)" rows="4" cols="45" id="machine_specs_short"></textarea>
                <br>
                <textarea placeholder="Enter specs and long machine description. Include such things as possible damage, what was fixed, and some information about it" rows="7" cols="70" id="machine_specs"></textarea>
                <label for="image_selector">Select images of the machine to upload. Hold shift or ctrl/cmnd to select multiple images.</label>
                <input type="file" name="images" placeholder="Select images to upload" id="image_selector" accept="image/png, image/jpeg" multiple/>
                <button id="add_machine_submit_button">Submit Listing</button>
            </div>

            <div id="selected_images">
                <h2>Images you have selected show up here</h2>
                <p>Scroll down to see all images</p>
                <br>
                <!--JavaScript will fill this in :). JS saves the day agin!-->
            </div>

            <p id="upload_status">Upload status:</p>
        </div>

        <h2 style="margin-left: 15px;">All machine listings</h2>
        <table id="listing_table">
            <thead>
                <tr>
                    <!--Headers for columns-->
                    <td>Name</td>
                    <td>Date Created</td>
                    <td>Date Edited</td>
                    <td>Options</td>
                </tr>
            </thead>
            <tbody>
                <!--JavaScript will fill this area in :) JS helps out again-->
            </tbody>
        </table>
    </article>
</body>

<script type="module" src="/scripts/upload_script.js"></script>
<script type="module" src="/scripts/all_listings_script.js"></script>
</html>

...and here is the CSS for the page:

#add_machine_listing{
    width: 96%;
    height: fit-content;
    border: 3px solid blue;
    border-radius: 25px;
    margin-left:10px;
    margin-right: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/*The two style groups below this comment are for the div with the unwanted border*/
#editing_options{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 30px 10px;
}

#editing_options a{
    margin-left: 50px;
    margin-right: 50px;
}

#selected_images{
    margin-left: 50px;
    padding: 20px;
    width: 500px;
    overflow-y: scroll;
    height: 500px;
    scrollbar-width: 10px;
    border: 3px solid blue;
    border-radius: 25px;
}

#selected_image{
    height: auto;
    width: 500px;
}

input{
    display: block;
    height: 25px;
    width: 400px;
    margin-top: 10px;
    margin-bottom: 20px;
}

input[type="file"]{
    margin-top: 5px;
    margin-bottom: 10px;
    margin-bottom: 20px;
}

a{color: blue;}
label{display: block;}

#submit_button{
    background-color: wheat;
    color: red;
    font-weight: 600;
    height: 30px;
    width: 150px;
    border-radius: 20px;
}

textarea{
    resize: none;
    font-family: inherit;
    font-size: 13px;
    margin-bottom: 25px;
}

/*For the listings table*/
#listing_table{
    color:white;
    width: 98%;
    height: auto;
}

table, th, td {
    border: 10px solid white;
}

#listing_table tbody tr td{
    background-color:lightgray;
    border-collapse:separate;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 100px;
    vertical-align: top;
}

#listing_table thead tr td{
    background-color:blue;
    padding:10px;
    color:white;
}

#listing_table tbody #listing_change_buttons{
    background-color: white;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

#listing_change_button{
    height: 25px;
    width: 25px;
    margin-right: 10px;
}

#upload_status{
    margin-left: 50px;
    height: 200px;
    width: 275px;
    border: 3px solid blue;
    border-radius: 20px;
    padding: 10px;
}

This is the output:

What I have tried I just want to note that the JavaScript files are not altering this container in any way.

I had tried negating the border effects by setting border: none; on the container, however this did not work.
I am using visual studio code with the live server plugin to test the website. I had restarted the software several times with the same result.
Testing the website with Firefox was what I thought to be the cause, but when using another browser like Chrome or Safari, the same issue occurs

CodePudding user response：

You are using the same id="add_machine_listing" on mulitple elements, thus your styles for #add_machine_listing are getting applied to both. Remove or change the id on your anchor tag:

<a href="/index.html" id="add_machine_listing">Add machine listing</a>

It's also worth noting that no two elements can have the same ID. And for styling purposes, it's generally "best practice" to use class names instead of id's (it's an unwritten rule of sorts). I usually try to avoid IDs in general.