Help: Unknown Error

Code Feedback
1

This might be a small error somewhere that I can’t spot, but the CSS for one of my <div> sections isn’t taking.

The HTML for this section looks like this:

<a name="contact"></a>
<div class="contact">Contact Me</div>

And the CSS looks like this:

.contact {
  text-align: center;
  border: 2px solid black;
  border-radius: 15px;
  width: auto;
  height: 300px;
  margin: 10px;
  padding: 5px;
}

But the webpage looks like this:

ss.JPG1366×644 148 KB

The border box is, for some reason, up near the top of my thumbnail grid, behind the photos.

Here is the direct link to the Codepen.

I’ve combed through this code a hundred times, and I can’t for the life of me figure out what’s wrong. I think I just need another set of eyes to look it over. I would be immensely appreciative for any suggestions! :grin:

2

I don’t have a 100% fix, but adding display: inline to the CSS wraps the border around the contact me text. It messes with the cantering, though…

1 Like
4

I really need to improve my CSS chops…

6

Thank you! You guys are life savers. Here’s how it all went down :sunglasses: haha

First I added display: inline; as suggested by @JacksonBates and that helped bring the box down and wrap it around the “Contact” text just like you said it would. But it still wasn’t taking the other CSS formatting. Hmmm…

So then I added clear: both; as suggested by @P1xt, but when I ran it, nothing changed…UNTILLL :bulb: I removed the `display: inline;``and then TA-DA! :tada: Problem solved :relieved: