How to think to get all content inline (HTML & CSS) - html

Question

I'm a really new at this but I don't manage to ge the menu bar to get in line with the rest of the content on the page. Can someone just explain how to think to get everything in line and so everything scale nicely?
HTML:
<div id="all">
<ul id="menu1">
<li><img src="Pic/Homemini.png"></li>
<li><img src="Pic/MeMINI.png"></li>
<li><img src="Pic/portfolioMINI.png"></li>
<li><img src="Pic/contactMINI.png"></li>
</ul>
<ul id="menu2">
<li><img src="Pic/Home.png"></li>
<li><img src="Pic/Me.png"></li>
<li><img src="Pic/portfolio.png"></li>
<li><img src="Pic/Contact.png"></li>
</ul>
<div id="box1MINI"><img src="Pic/box1MINI.png"></div>
<div id="main"><img src="Pic/main.png"></div>
<footer>
<p>DID YOU KNOW?</p>
<p>alsdjaljsdkasjd askldjalksdj <br> asdlkjaslkd asldkjasldj asldk <br> alsdkjalksdj lakdj</p>
</footer>
</div>
CSS:
/* ALL CONTENT */
* {
max-width: 100%;
}
#all{
margin: auto;
}
/* END ALL CONTENT */
/* HEADER */
ul li{
display: inline-block;
width: 20%;
}
#menu2{
display: none;
}
#box1MINI{
max-width: 80%;
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main{
margin: auto;
max-width: 80%;
}
/* END MAIN SPACE */
/* FOOTER*/
footer{
background-color: darkgreen;
width: 80%;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/

Answer 1

The issue you were getting because you gave "60%" width to "#box1MINI" and "80%" to "#main and footer". And no width to "Menus"
Whereas you should give width to the "Outermost" container which is "#all" in your case. and set that to center by "margin: 0 auto;" property. And keep everything else inside the "#all" container.
I have updated your code and made some modifications as per good practice.
Please find the Updated code below:
HTML
<div id="all">
<ul id="menu1">
<li>
<img src="Pic/Homemini.png">
</li>
<li>
<img src="Pic/MeMINI.png">
</li>
<li>
<img src="Pic/portfolioMINI.png">
</li>
<li>
<img src="Pic/contactMINI.png">
</li>
</ul>
<ul id="menu2">
<li>
<img src="Pic/Home.png">
</li>
<li>
<img src="Pic/Me.png">
</li>
<li>
<img src="Pic/portfolio.png">
</li>
<li>
<img src="Pic/Contact.png">
</li>
</ul>
<div id="box1MINI">
<img src="Pic/box1MINI.png">
</div>
<div id="main">
<img src="Pic/main.png">
</div>
<footer>
<p>DID YOU KNOW?</p>
<p>
alsdjaljsdkasjd askldjalksdj
<br>
asdlkjaslkd asldkjasldj asldk
<br>
alsdkjalksdj lakdj
</p>
</footer>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0 auto;
}
#all {
margin: 0 auto;
width: 80%;
}
/* END ALL CONTENT */
/* HEADER */
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 24.6%;
margin: 0;
padding: 0;
}
#menu2 {
display: block;
}
#box1MINI {
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main {
margin: auto;
}
/* END MAIN SPACE */
/* FOOTER*/
footer {
background-color: darkgreen;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
Working Fiddle: http://jsfiddle.net/96ft87ev/1/
Hope this will help!
Let me know if you were looking for something else!

Answer 2

Add this selector:
#menu1 {
text-align:center;
}
Since you've set the li elements to be displayed as inline, they conform to text-alignment rules.
Edit: After this, the nav bar was still slightly off-center. This is due to a couple reasons. First of all, parts of your HTML are invalid, resulting in tags not being nested properly. Your link, img, and br tags all need to be self-closing. That just means you need to add a / (slash) before the > symbol on the tag.
After you've fixed that, simply remove the padding that is added to the li elements by adding padding:0 to the #menu1 selector.
Here is an example (I've added borders, but you can remove them).

Answer 3

When using percentages, it uses the parent to calculate. You want each li to be 20% of the page, not 20% of the parent (ul). Set the width for menu1 as 80%, then each li is 25% of that. Give the ul auto margins and it will line up with content.
#menu1{
margin: auto;
width:80%; //same as content
padding: 0px;
}
ul li{
display:inline-block;
width: calc(25% -4px); //each image is 25% of the parent, parent is 80% of page
box-sizing: border-box; //includes border and padding in box size
}
fiddle