I can't seem to move anything around on my web page

Hi :wave: I am on the Healthy Recipes part of the CSS lesson, and I have went off to try and design something on my own, but I can’t seem to move things around on the site. The CSS code seems right, I have linked the code to the HTML file, and I have used selectors as well. I keep trying but a lot of the time nothing seems to happen on the webpage.

This is my CSS code to move text to the right:

.everything {
  right: 50px;
} ```

**This is my HTML code:** 

``` <!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<img class="first" src="First">

<heading> <title>Sami Dinno</title></heading>

<header class="everything"> 
  <h1 >Samster</h1>

  <h1 class="resume">Resume</h1>

        <th>Article of the Day</th>

<img class="second" src="second.jpg">

</html> ```

Hi! Thanks for sharing your code!

Remember, whatever you want to affect has to have css targeting it. I only see this being affected:

<header class="everything"> 
  <h1 >Samster</h1>

If you can’t tell if the element targeting is working or not, try changing the color or the border (something obvious).

If you right click and do inspect element in the browser, you can find tools to click around the screen and see if your elements are properly being targeted by your css.

Also, <tabel> should be <table> and </table> or it won’t display properly.

1 Like

Thank you for those tips! So, I tried to add a border to the header below and it worked. The border showed in the browser, but I still cannot move my text.

  <h1 >Samster</h1>

That’s more of a matter of controlling your container sizes and layouts. You can view your containers like so:
Screen Shot 2020-07-06 at 6.01.09 PM

At first I like setting up big container boxes that are going to be in my page (so a big body one, maybe one for left-content, right-content columns that go inside the body container).

I color them in obvious colors like red, blue, yellow, to position them precisely. When I’m happy with that layout, I remove the color and put my content inside, now I know when I move those boxes, the content will follow.

This is just one technique, and as you get used to it. It’s easier to do without the color help.

1 Like

It’s still not working. I still can’t move my text to be on top of anything else

Hey can you share your code again of your new attempts?

It seems like when I add the following code in a specific order (making sure to include position and text-align) I can move text around my page but I don’t really know if the text is actually perfectly aligned because I don’t know how.

This is the HTML


  <link href="style.css" type="text/css" rel="stylesheet">

<body class="body">
  <div class="header">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/travel.jpeg" />
    <h1 class="name">OLIVIA WOODRUFF</h1>```

**This is the CSS**

```  .name {
  text-align: center;
  position: relative;
  top: -150px;
  left: 2.5px;

Screen Shot 2020-07-06 at 7.52.33 PM
Screen Shot 2020-07-06 at 7.52.41 PM

The alignment works :slight_smile: if you want to make the container smaller, you can set a fixed width like 80-90% so it doesn’t fill the whole screen. That way, if you align it right or left, it only goes so far (not all the way to the edge).

interesting what you said about the container size! I’ve also been struggling with that too! Thank you

1 Like

Another useful look at how your H1 is interpreted.

1 Like

Whenever I’m doing a project and it’s time to implement design, I spend a lot of time with the MDN documentation because CSS is not what I’m doing every day. Another good resource for ideas is Kevin Powell’s youtube channel. I should probably get royalties for how much I recommend it but it really is useful for breaking down css concepts in real practical terms (unlike the way I break them down ahhahahah)

1 Like

:smile: thank you! I’ll definitely check it out!