Side by side nav still doesnt work properly plus other issues - html

Question

The sidebyside nav now displays something but shortens the original menu-text to only text-length (it should take the whole line). The links in the top line should be displayed next to each other but w/o boxes. I've tried everything w/o success. I want to do my code with as little scripting as possible, only HTML and CSS if possible.
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large;
text-align: center;
text-decoration: underline;
}
h4 {
font-size: large;
text-align: center;
text-decoration: underline;
background-color: cyan;
border-width: 1px;
border-style: solid;
border-color: #f00000;
margin-top: 0;
margin-bottom: 0;
}
.sidenav {
height: 100%;
<!-- width: 20%;
-->position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
overflow-x: hidden;
}
.sidenav a {
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #f00000;
font-size: medium;
padding: 1 em 2 em;
color: #000000;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
margin-top: 0;
right: 0px;
font-size: medium;
margin-left: 50px;
border: none;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
#wrapper {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: visible;
}
.menu {
background-color: #a0a0a0;
width: 20%;
height: 100%;
float: left;
overflow: hidden;
}
#main {
background-color: #00a000;
width: 80%;
height: 100%;
float: left;
overflow: hidden;
border: none;
}
#elf {
background-color: #0000c0;
color: #a0a0a0;
font-weight: bold;
}
#elf:hover {
background-color: #0000e0;
color: #c0c0c0;
font-weight: bold;
}
#divine {
background-color: #a000a0;
color: #c0c000;
font-weight: bold;
width;
100%;
min-width: 100%;
}
#divine:hover {
background-color: #c000c0;
color: #f0f000;
font-weight: bold;
width: 100%;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
/* Change color of dropdown links on hover */
.divine-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.divine:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.divine:hover .dropbtn {
background-color: #3e8e41;
}
.divine-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
.divine-content+a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
z-index: 3;
}
.size {
display: inline;
color: black;
background-color: red;
text-align: center;
}
/* Change color of dropdown links on hover */
#divine-content+a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
#divine:hover+.divine-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
#divine:hover .dropbtn {
background-color: #3e8e41;
}
<h1>Thyra Kristin Lang<br></h1>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- </div> -->
<div id="wrapper">
<div class="menu" background-color="005000">
<div id="mySidenav" class="sidenav">
<h4>Hauptmenü</h4>
<table class="size">
<tr>
<td><a style="text-size:normal padding-right: 2 em" onclick="javascript:normal()" border="0">A </a>
<td><a style="text-size:large padding-right: 2 em border-style: none;" onclick="javascript:large()">A</a></td>
<td><a style="text-size:x-large padding-right: 2 em" onclick="javascript:xlarge()">A</a></td>
</tr>
</table>
<div>Lebenslauf</div>
<div>Werkeverzeichnis</div>
<div class="dropdown">Divine
<div class="divine-content">
Link 1
Link 2
Link 3
</div>
</div>
Elfenblut
Gedichte
<br>
</div>
</div>
<iframe id="main" name="main" src="willkommen.html" background-color="005000">blub</iframe>
</div>

Answer 1

Try using display:inline-block it will make all elements displayed on a block and use margin or padding to separate them.

Answer 2

A couple things: Only one element should have an specific value for id. The id is unique per element. Styling element inline and externally can sometimes make it difficult to troubleshoot a problem. My personal preference is one or the other except in certain cases.
The question may need more details. Here's what I think you want using flex I was able to position the links next to each other and the take up the whole line without boxes.
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large; text-align: center; text-decoration: underline; }
h4 {
font-size: large; text-align: center; text-decoration: underline; background-color: cyan;
border-width: 1px;
border-style: solid;
border-color: #f00000;
margin-top: 0;
margin-bottom: 0;
}
.sidenav {
height: 100%;
<!-- width: 20%; -->
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
overflow-x: hidden;
}
#mySidenav1 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.sidenav a {
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #f00000;
font-size: medium;
padding: 1 em 2 em;
color: #000000;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
margin-top: 0;
right: 0px;
font-size: medium;
margin-left: 50px;
border: none;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
#wrapper {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: visible;
}
.menu {
background-color: #a0a0a0; width: 20%; height: 100%; float:left; overflow:hidden;
}
#main {
background-color: #00a000; width: 80%; height: 100%; float:left; overflow:hidden; border: none;
}
#elf {
font-weight: bold;
}
#elf:hover {
background-color: #0000e0;
color: #c0c0c0;
font-weight: bold;
}
#divine {
font-weight: bold;
}
#divine:hover {
background-color: #c000c0;
color: #f0f000;
font-weight: bold;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* Change color of dropdown links on hover */
.divine-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.divine:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.divine:hover .dropbtn {background-color: #3e8e41;}
.divine-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
.divine-content + a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
z-index: 3;
}
.size {
display: inline;
color: black;
background-color: red;
text-align: center;
}
/* Change color of dropdown links on hover */
#divine-content + a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
#divine:hover + .divine-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
#divine:hover .dropbtn {background-color: #3e8e41;}
<h1>Thyra Kristin Lang<br></h1>
<div id="mySidenav1" class="sidenav1">
x
Lebenslauf
Werkeverzeichnis
Divine
Elfenblut
Gedichte
<br>
</div>
<br>
<!-- <h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p> -->
<!-- <span id="MyButton" style="font-size:medium; cursor:pointer;" onclick="openNav()">Hauptmenü öffnen</span> -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- </div> -->
<div id="wrapper">
<div class="menu" background-color="005000">
<div id="mySidenav" class="sidenav">
<h4>Hauptmenü</h4>
<table class="size">
<tr>
<td><a style="text-size:normal padding-right: 2 em" onclick="javascript:normal()" border="0">A </a></td>
<td><a style="text-size:large padding-right: 2 em border-style: none;" onclick="javascript:large()">A</a></td>
<td><a style="text-size:x-large padding-right: 2 em" onclick="javascript:xlarge()">A</a></td>
</tr>
</table>
<div>Lebenslauf</div>
<div>Werkeverzeichnis</div>
<div class="dropdown">Divine
<div class="divine-content">
Link 1
Link 2
Link 3
</div>
</div>
Elfenblut
Gedichte
<br>
</div>
</div>
<iframe id="main" name="main" src="willkommen.html" background-color="005000">blub</iframe>
</div>