Why isn't my padding working? (HTML & CSS)

Question

On my website, I have created a sidebar. However, I want a padding of 40px between the content in the sidebar and the border of the sidebar. I have tried this but for some reason, it didn't work. What's going on?

My code:

.sidebar {
  padding: "40px 40px 40px 40px";
}

<div id="sidebar">
    <form id="signUp" name="signUp">
        <p>
            <b>Hey!</b> Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D<br>
            <br>
            Nickname: <input id="nickname" placeholder="Nickname" required="" type="text"><br>
            Email Address: <input id="email" maxlength="254" placeholder="Email Address" required="" type="text"><br>
            Password: <input id="password" placeholder="Password" required="" type="password"><br>
            <input onclick="confirmAccount" type="button" value="Submit">
        </p>
    </form>
</div>

Answer 1

Remove your `"'s...

Try #sidebar { padding: 40px 40px 40px 40px; } instead.

Or you can just use #sidebar { padding: 40px; } as you need all sides padding 40px...

Answer 2

First of all your div has an id so use # instead of .. Second remove the quotes from the padding values - as they are all the same you can just use one 40px value. The folllowing should work:

#sidebar {
  padding: 40px;
}

Answer 3

You have put .sidebar in your css style, which is a tag associated with a class (.).

For ids, such as your sidebar, always use a hash (#) to identify them in CSS. In this case you need to put #sidebar instead of .sidebar in your code.

Answer 4

Using the correct selector (# instead of .) and removing the quotes and then this should work.

#sidebar {
  padding: 40px 40px 40px 40px;
}

<div id="sidebar">
    <form id="signUp" name="signUp">
        <p>
            <b>Hey!</b> Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D<br>
            <br>
            Nickname: <input id="nickname" placeholder="Nickname" required="" type="text"><br>
            Email Address: <input id="email" maxlength="254" placeholder="Email Address" required="" type="text"><br>
            Password: <input id="password" placeholder="Password" required="" type="password"><br>
            <input onclick="confirmAccount" type="button" value="Submit">
        </p>
    </form>
</div>