Nav element goes below header - html

Question

So i have been struggling a bit with a problem of mine. First my Nav bar will for the life of me not go Into the header element. my picture element (#Billede div box) seems to be affected by this since i've only given it a height and width, but it scaled all the way to the left and is there to stay.
Any tips?
nav,
li,
a {
text-decoration: none;
list-style-type: none;
float: right;
margin-bottom: 10px;
padding: 5px;
}
header {
width: 80%;
height: 100px;
margin-rigth: 10%;
margin-left: 10%;
color: rgb(255, 46, 248);
}
form {
margin-top: 100px;
width: 800px;
margin-right: 400px;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
textarea[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
float: left;
resize: none;
}
button[type=submit] {
width: 100%;
background-color: rgb(255, 45, 248);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#Billede {
height: 60px;
width: 30px;
}
<header>
<h1>Mike's Portfolio</h1>
<nav>
<li>Opgaver</li>
<li>Om Mig</li>
</nav>
</header>
<div id="Info"></div>
<div id="Billede"><img src="../../Images/Billede.jpg"></div>

Answer 1

is this how you want this??.. h1 is a blog element so it it takes full width that is why nav comes on the next line. hope it helps
your image moved to right because your image is wrapped with a and a has float: right css
nav, li, a {
text-decoration: none;
list-style-type: none;
float: right; //this
margin-bottom: 10px;
padding: 5px;
}
nav, li, a{
text-decoration: none;
list-style-type: none;
float: right;
margin-bottom: 10px;
padding: 5px;
}
header{
width: 80%;
height: 100px;
margin-rigth: 10%;
margin-left: 10%;
color: rgb(255, 46, 248);
}
form{
margin-top: 100px;
width: 800px;
margin-right: 400px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
textarea[type=text], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
float: left;
resize: none;
}
button[type=submit] {
width: 100%;
background-color: rgb(255, 45, 248);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#Billede{
height: 60px;
width: 30px;
}
h1{
display: inline-block;
margin: 0;
}
<header>
<h1>Mike's Portfolio</h1>
<nav>
<li><a href="#">Opgaver</li>
<li><a href="index.html">Om Mig</li>
</nav>
</header>
<div id="Info"></div>
<div id="Billede"><img src="../../Images/Billede.jpg"</div>