I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be in this specific format.
Is there anyone who can enlighten me on what mistake I might be making and how I can resolve it?
https://jsfiddle.net/norbertoalexander/4ea23bbn/2/
/* FONTS
font-family: 'Lobster', cursive;
font-family: 'Playfair Display', serif;
*/
/*
Background = #FEFFA0
Border = #ACDB86
Text Background = #EEEEEE
Hover = #547C66
Text Color = #3B5B5D
*/
html, body {
height: 100%;
margin: 0;
background-color: #FEFFA0;
}
div.head {
height: 70px;
background-color: #ACDB86;
margin: 0 auto;
}
h1 {
font-family: 'Lobster', cursive;
font-size: 45px;
text-align: center;
}
div.menu {
border-style: solid;
border-color: blue;
margin: 5px;
float: left;
width: 150px;
height: 500px;
list-style: none;
text-align: center;
}
ul {
margin: 0 auto;
list-style: none;
text-align: center;
font-size: 20px;
}
li {
margin: 0 auto;
text-align: center;
}
h2 {
text-align: center;
font-size: 25px;
font-family: 'Lobster', cursive;
}
div.fuent {
border-style: solid;
border-color: blue;
margin: 5px;
float: right;
width: 150px;
height: 500px;
}
div.leng {
border-style: solid;
border-color: yellow;
margin: 5px;
width: 72%;
float: left;
}
div.resu {
border-style: solid;
border-color: blue;
margin: 5px;
width: 72%;
float: left;
}<!DOCTYPE HTML">
<html>
<head>
<title>Languages</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Playfair+Display" rel="stylesheet">
<link href="styles/lang.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--title-->
<div class="head">
<h1>Languages</h1>
</div>
<div class="menu">
<ul>
<li><h2>Menu</h2></li>
<li><a href="index.html">Home</a></li>
<li><a href="algorithm.html">Algorithms</a></li>
<li><a href="languages.html">Languages</a></li>
<li><a href="problems.html">Problems</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
<div class="fuent">
Fonts
</div>
<div class="resu">
Summary
</div>
<div class="leng">
Language
</div>
</body>
</html>