I can't move image to top-left of screen with css-CodePudding

I'm trying to use an image of my logo on the webpage and put it into the top-left of my webpage but it seems to have a space on the top and left side of the image and I want it flush just like dropbox.com does it Here's the html: `

<body>
    <nav>
      <div >
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

I've tried many things such as remove padding/margin, change position, float, I'm new to coding so I can't seem to fix it or find an answerenter image description here

CodePudding user response：

Remove the default margin of the body element:

body {margin:0;}

CodePudding user response：

using position relative and position absolute may be your answer. we position the container relative, allowing our absolute positioning to be relative to this container. I added a background so you can see the position of the logo better.

nav{width:100%;position:relative;}
.logo{position:absolute;top:0;left:0;width:150px;height:150px;background:#ededed;}

<body>
    <nav>
      <div >
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

Also make sure your css is being linked in the head of your index file as without this no styles will pass through to the page.

Final Result After reviewing the issue with Jacob on jsfiddle we established that he was not including the css in the head. Adding the css to the head of the site fixed the issue and the custom styles are now styling the image correctly.

CodePudding user response：

You should remove the space of the parent elements. Did you remove all of them?

for example:

body, body * {
  margin: 0;
  padding: 0;
}