So my lists are inline/horizontal and not vertical as they should be. And I don’t understand why. Any idea why that is?
These are a few screenshots of the issue ,where the lists arise on the same row horizontally:



Here is HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FROGIVERSE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div id="header"></div>
<h1 class="Froglegs"><a href="index.html" class="Frogiverse">FROGIVERSE</a></h1>
<p>Frogs like to eat insects when they are hungry</p>
<div class="container">
<header>
<img src="images/Frog.svg" alt="23andfour logo" class="logo" id="logo">
<nav>
<a href="#" class="hide-desktop">
<img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
</a>
<ul class="show-desktop hide-desktop" id="nav">
<li id="exit" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="Boxen">
<h1>Frogs love to swim slowly during the day when the fish are less active</h1>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="images/Frog.svg" alt="server graphic" width="100" height="100" class="Frog">
<p class="subhead">Frogs also like to sleep. At least they close their eyes</p>
<button id="Frogbutton" type="button">Click for frog moves</button>
</section>
</div>
<img src="images/FrogLogo.jpg" alt="server graphic" class="server">
<div class="blue-container">
<div class="container">
<ul>
<li>
<p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p>
</li>
<li>
<p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p>
</li>
<li><p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p></li>
</ul>
</div>
</div>
<div class="gray-container">
<div class="container">
<ul>
<li>
</li>
</ul>
</div>
</div>
<p id="demo">This site is mostly about frogs.</p>
<div>
<br><br>
<!--Here begins the popup form-->
<div class="form-popup" id="myForm">
<form method="POST" action="action-page.php" class="form-container">
<input type="text" placeholder="name" name="name" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
<!--Here ends the popup form-->
<br><br>
<button onclick="myFunction()" class="Frogs">What do frogs like?</button>
<p id="Frog2"></p>
</div>
<div id="footer"></div>
<script>
function bigImg(x) {
x.style.height = "100px";
x.style.width = "100px";
}
function normalImg(x) {
x.style.height = "160px";
x.style.width = "160px";
}
function myFunction() {
var str = "Frogs like to chill out";
var result = str.fontcolor("darkgreen");
document.getElementById("Frog2").innerHTML = result;
}
document.getElementById("demo").style.color= "green";
</script>
</body>
</html>
Here is CSS:
@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap’);
/* Custom Properties */
{
box-sizing: border-box;
}
h1:hover, .Frogiverse:hover{
color:red;
text-shadow: red 2px 2px 10px;
}
body {
font-family: ‘Montserrat’, ‘sans-serif’;
background-image: linear-gradient(45deg, white, #e6e6ff,orange, green);
}
body p{
font-weight: bold;
}
p:first-child {
color:green;
text-shadow: blue 2px 2px 10px;
}
.text {
color: #3d9801;
text-shadow: orange 2px 2px 2px;}
h1, .Frogiverse {
color: #3d9801;
font-family: ‘Source Sans Pro’, sans-serif;
font-weight: bold;
margin-left: 5px;
font-size: 43px;
text-shadow: black 2px 2px 10px;
text-decoration: none;
}
h1 a, .Frogiverse a{
color: #196719;
font-family: ‘Montserrat’, ‘sans-serif’;
font-weight: bold;
margin-left: 5px;
font-size: 43px;
text-shadow: black 2px 2px 10px;
}
.boxen{
z-index: -4;
}
.boxen:first-child{
z-index: -1;
}
.server {
object-fit: cover;
position: absolute;
top: 340px;
right: 15px;
left: 250px;
width:24%;
height:29.3%;
border-radius: 2px;
z-index: -2;
margin-left:10px;
}
.topmenu {
overflow: hidden;
background-color: #3d9801;
padding-top: 5px;
padding-bottom: 0px;
height: 36px;
margin-top: 0px;
background-image: linear-gradient(to right, #3d9801 ,#3d9801, #3d9801, white);
}
.Froglegs {
position: absolute;
margin-right: 25px;
margin-left: 1000px;
margin-top: 65px;
font-size: 50px;
}
.topmenu a {
color: #f2f2f2;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
font-size: 18px;
position: relative;
margin-left: 90px;
margin-top: 10px;
margin-bottom: 0px;
bottom: 14px;
font-family: ‘Montserrat’;
}
.Frog{
position: absolute;
top:-100px;
margin-top:0px;
margin-bottom: 20px;
padding-top: 0px;
border: 0;
}
li {
float: left;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #196719;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 5px;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: left;
padding-bottom: 20px;
padding: 12px 16px;
z-index: 2;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
a:hover {
color: #0300ea;
text-shadow: 0px 0px 1px orangered;
}
.Frogiverse a:hover{
text-shadow: none;
}
.topmenu a:hover {
background-color: #ddd;
color: black;
text-shadow: none;
}
/.logo {
position: absolute;
left: 0px;
top: 110px;
bottom: 0px;
z-index: -3;
object-fit: cover;
}/
.logo {
object-fit: cover;
position: absolute;
top: 36px;
right: 150px;
left: 0px;
width:24%;
height:29.3%;
z-index: -3;
border-radius: 2px;
}
.butt {
width: 2px;
border: 2px solid green;
border-radius: 40%;
}
ul {
font-weight: normal;
display: block;
}
/* Here the footer begins */
,:before,*:after{
box-sizing: border-box;
}
body{
font-family: Montserrat;
margin: 0;
font-size: 14px;
display: grid;
}
main{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 3.8;
font-size:80px;
text-transform: uppercase;
font-weight: bold;
}
footer{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #3d9801;
display: flex;
flex-direction:row;
margin: auto;
}
.footer > *{
flex: 1 100%;
}
.footer-left{
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-left img{
width: 50%;
}
h2{
font-weight: 400;
font-size: 17px;
}
.footer ul{
list-style:none;
padding-left:0;
}
.footer li{
line-height:2em;
}
.footer a{
text-decoration: none;
}
.footer-right{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.footer-right > * {
flex:1 50%;
margin-right: 1.25em;
}
.box a{
color: #fff;;
}
.footer-bottom{
text-align:center;
color: #fff;
padding-top: 50px;
}
.footer-left p{
padding-right: 20%;
color: #fff;
}
.socials a{
background: #364a62;
width:40px;
height:40px;
display:inline-block;
margin-right:10px;
}
.socials a i{
color: #e7f2f4;
padding: 10px 12px;
font-size: 20px;
}
@media screen and (min-width: 600px){
.footer-right > *{
flex:1;
}
.footer-left{
flex:1 0px;
}
.footer-right{
flex:2 0px;
}
}
@media screen and (max-width: 600px){
.footer{
padding:15px;
}
main{
font-size:55px;
}
}
/Here begins the popup form/
#open-button {
background-color: green;;
color: orange;
padding: 16px 20px 28px 20px;
border: 2px solid orange;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 80px;
border-radius: 8px;
width: 240px;
z-index: 20;
font-size: 16px;
cursor: pointer;
transition: all 0.5s ease;
height: 40px;
z-index: 20;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
background: rgba(23, 195, 7, 0.8);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
font-family: ‘Montserrat’, sans-serif;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
font-family: ‘Montserrat’, sans-serif;
outline: 1px;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
/* Full-width input fields */
.form-container input[type=name], .form-container input[type=password] {
width: 100%;
font-family: ‘Montserrat’, sans-serif;
outline: 1;
background: #f2f2f2;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
width: 100%;
font-family: ‘Montserrat’, sans-serif;
outline: 1px;
background: #f2f2f2;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
cursor: pointer;
margin-bottom:10px;
font-family: ‘Montserrat’, sans-serif;
text-transform: uppercase;
outline: 0;
background: #4caf50;
width: 100%;
border: 0;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: #4CAF50;
cursor: pointer;
margin-bottom:10px;
font-family: ‘Montserrat’, sans-serif;
text-transform: uppercase;
outline: 0;
background: #4caf50;
width: 100%;
border: 0;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
/Here ends the Popup form/