HTML Align navbar to the right, image fitting page

I’m starting ton code and I have some struggles with this website. First, I made the header with a nabber in it but I can’t align it to the right, if I try it with float:right it switches the links. And underneath all that I want a big picture but auto height and width doesn’t work if I make the page bigger.

<!DOCTYPE html>

<style>


    header{ background-color: white;
            margin-left: 20px;
            margin-top: 30px;
    }
    img.logo{ width: 200px;
              height: 30px;
    }

    li{ display: inline;
    }

    ul{ position: fixed;
        top: 20px;

    }

    a{  font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    img.picvp{margin-top: 20px;
              width: auto;
              height: auto;
    }

</style>

<header>

      <img class="logo" src="#">

    <ul>
        <li style="float:right;"><a target="_blank" rel="nofollow" href="Site%20DIA%20main.html">Projecten</a></li>
        <li style="float:right;"><a target="_blank" rel="nofollow" href="#">over</a></li>
        <li style="float:right;"><a href='#'>Contact</a></li>
    </ul>

</header>

<sec>
  <img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>

Thank you!



Here is a link to the solution: Fiddle N1

You just needed to add: width: 100%; to the class img.picvp.
Another thing is that you should’ve set your ul elements like that:

 ul{ 
    position: relative;
    display: inline;
    text-align:right;
    }

text-align:right automatically pulls the elements to the right side of the parent div. Also use relative positioning rather than fixed one. I have made some changes to the width of the background image as well. Compare the changes to the code so you can see what exactly has been changed.

Using display:flex will help with this.

hii i modify some of code but impornant i use parent and child an example in your i use as parent and

  • as child see example as follow
    (dont forgot to change img src)

    header{ background-color: white;
            margin-left: 20px;
            margin-top: 30px;
    }
    img.logo{ 
    
    
    width: 1100px;
              height: 130px;
    }
    
    ul,li{ display: inline;
    text-decoration:none;
    
    
    }
    

    a,li{
    display: inline;

    }

    a{  font-family: 'Open Sans', sans-serif;
        text-decoration:none;
        display: inline;
    }
    
    img.picvp{margin-top: 20px;
              width: auto;
              height: auto;
    }
    

      <img class="logo" src="nows.jpg">
    
    <ul>
        <li style="float:right;"><a target="_blank" rel="nofollow" href="Site%20DIA%20main.html">Projecten</a></li>
        <li style="float:right;"><a target="_blank" rel="nofollow" href="#">over</a></li>
        <li style="float:right;"><a href='#'>Contact</a></li>
    </ul>