Aligning a ul

hello all, i have this code

<div class="midMenu">
   <div class="visualMenu">
      <ul>
         <li>whatever</li>
         <li>whatever</li>
         <li>whatever</li>
      </ul>
   </div>
</div>

& the respective css

.midMenu{

}
.visualMenu{
width:100%;
background:#142952;
}
.visualMenu ul{
list-style-type:none;
margin:0px auto;
}
.visualMenu li{
display:inline-block;
}
.visualMenu li img{
width:75%;
height:auto;
padding:5px;
background:#fff;
border:1px solid #000;
}

however the ul is not aligning w/in the containing divs. There are no floats, left or right. so that shouldn’t be it? Could i get some advice on solving this please?
thx
D

never mind think i got it.
midMenu @ 100% width:
visualMeany @ 80% width & margin: 0px auto;
& still tweaking it but it seems to work.
kinda…
somewhat…still not pretty.

Not sure what the problem is, D. How do you want to menu items to align? A sketch? Do you have a sketch?

The only thing I see might be the absence of the {padding:0} reset on the <ul>, but I don’t know if that’s even relevant to the issue.

Mysterious, you are.
Keep 'em guessing, you do :slight_smile:


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1232294-aligning-a-ul
2014.09.03 16:19
pdxSherpa

-->
    <style type="text/css">
.midMenu {
}
.visualMenu {
    width:80%;
    margin:0 auto;
    background:#142952;
}
.visualMenu ul {
    list-style-type:none;
    padding:0;
    margin:0px auto;
}
.visualMenu li {
    display:inline-block;
    color:#fff;
}
.visualMenu li img {
    width:75%;
    height:auto;
    background:#fff;
    border:1px solid #000;
    padding:5px;
}
    </style>
</head>
<body>

<div class="midMenu">
   <div class="visualMenu">
      <ul>
         <li>whatever</li>
         <li>whatever</li>
         <li>whatever</li>
      </ul>
   </div>
</div>

</body>
</html>


no no no…sorry. more like embarrassed! working on a site but not quite ready to throw it out there yet.
most likely will throw it in here monday & ask for feedback & suggestions.
But thank you for your advice will go try it out!
D