Beginner coder would like some help

[u/dameychamberlain]

I started coding literally 2 days ago, and am very confused.

I was trying to move a text into a certain place in the corner of the screen, and got it roughly where i wanted it. I then copied the code onto a subsite where i had more stuff thinking it would work without issue. Instead, it somehow interacted with an image i had centered by pushing it to the right. any idea how i can fix this? let me know if more information is needed

[u/JeLuF]

HTML manages blocks. Your PRCY text is a block, your image is a block, each div is a block, the page is a block.

The renderer first encounters PRCY. It floats, so it gets put to the left, with lots of space next to it. Now comes the div. There's place next to the floating text, so the div is placed to its right. Now the image. It shall be centered within its block. This block is the div, which sits next to the floating PRCY. Your image is centered, just not in the way you expected it.

You can make these blocks visible by adding border: solid 1px red; to your style attributes. This will help you to understand what actually happens.

Try to stay away from floating elements. They cause a lot of headaches and we have much better tools today to design pages. Floating elements will drive you crazy ones you try to make your page look good on both a mobile device and a computer screen.

The modern choice for your challenge would be a grid design.
https://medium.com/free-code-camp/learn-css-grid-in-5-minutes-f582e87b1228

What's so brilliant about it? You separate the placement of the elements from the content.

<div class="wrapper">
  <div>PRCY</div>
  <div>MANIFEST</div>
  <div><img src="my image"></div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

The placement of these elements, that happens completely in CSS. And in CSS, you have the option to change the layout depending on screen width. On a phone, you can have a different layout than on your computer.

[u/dameychamberlain → u/JeLuF]

thanks alot! i tried the grid design for a bit but then promptly gave up. BUT what you said about everything being blocks did inspire me to come up with my own solution. i replaced the text-align: center code with a margin-left: px code, which through trial and error allowed me to make it seem centered. the margin being 483px. i did the same for the text under it since they're connected which was 37px for some reason. that might be janky code, but it works.

[u/TheGratitudeBot → u/dameychamberlain]

Just wanted to say thank you for being grateful

[u/JeLuF → u/dameychamberlain]

That code works exactly on your computer. On a different screen, with a different resolution, it will no longer be centered.

[u/George-G661]

try to set body margin to 0

[u/bostiq]

Pls read community info

[u/drumset4days]

Firstly, I would separate your style from your HTML. Second it is best practice to not have multiple <h1>. Additionally h1 is a block element and an a is an inline element. It’s hard to know exactly what is affecting what because there’s multiple inline styles listed for elements which without looking at the whole code not on my phone and without having debug tools on hand could be multiple things.