Trying to center with margin: 0 auto

[lisalittleindia]

Hi,

This is the link to my code: https://codepen.io/IkeaFlowers/pen/LYzOaGm

I have created two arrows that link to different sections of the webpage. I am trying to center them using margin: 0 auto, but it doesn’t seem to be working.

Can anyone give me a clue where I am going wrong?

Much appreciated

[Cody_Biggs]

Looking at the CSS it looks like you are trying to style the wrong selector. You are trying to style the .arrow-link class. Should be styling the .arrow-down class. I then just used margin top and left to get it looking like

There are several other things now that I take a closer look at your HTML

1. You seem to have a div wrapped inside a anchor tag? And it is not closed properly either. It would make more sense to have that <a> tag inside of the div.

2. You set the position to absolute. So even if you center it with margin auto the arrow will appear overlapping your text unless you move it down

3. Here is a good description of margin auto just for future reference

“You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.”

You were styling the wrong selector to start, but even if that was the right selector you can see why it would not work because that selector you are using for margin auto has no width.

Hope that points you in the right direction

[lisalittleindia]

Thank you, this was very helpful!

[Cody_Biggs]

I have to apologize, but you were right about the anchor tag. I did not look closely enough, I think the anchor tag around the div confused me for a second but you do need this:

<a href="#projects">
    <div class="arrow-down">
    </div>
  </a>

So you can click on the arrow. Otherwise if it is inside the dive then it does not work. Sorry, again I confused myself

[lisalittleindia]

Ah I wondered, thanks again!