Adding margins to buttons

I was working on one of the projects for the training course, specifically the portfolio project when I stumbled upon a problem that I could not seem to fix.

I have a button like so:

with the class button-prop:

.button-prop { width: 100px; height: 40px; }

The button worked perfectly fine, whenever I clicked on it, the button scrolled down to the div with the id about-section. However, I wanted to adjust the positioning of the button, so I added a margin to button-prop:

.button-prop { margin-left: 700px; width: 100px; height: 40px; }

While the button moved right where I wanted to be, 700px to the right, the button no longer functioned. Clicking it no longer scrolled me to the about-section. Am I missing something, or am I not properly adding a margin to a button?

Can you post a codepen demoing the problem?

I just find it odd and unusual to apply a 700px margin to the button tag.

If you want to position the button somewhere else on the page, why don’t you wrap the button around a div and instead position the div properly.

1 Like

From what you’ve presented I can’t fathom why the link to #about-section is no longer working, but I can suggest an improvement for your code. Emdebbing a button element in an anchor element is not valid HTML5 according to the HTML5 Web Specification from W3C.

Getting rid of the button element and moving its classes and IDs to the anchor element is an option. [This] (https://stackoverflow.com/a/6393863/6114044) answer on Stack Overflow gives further clarification.

If the problem persists, maybe placing it in a CodePen and sharing it here would help me identify the issue.

2 Likes