I am currently working on making a webpage responsive. I have successfully created a logo div that resizes accordingly. Now, I am facing a challenge with centering the buttons in the menu list. Despite my efforts, the buttons are not aligning in the center as I intended, especially on larger screen sizes.
@charset"UTF-8";
/* CSS Document */
/*General*/
#wrapper {
width: 100%;
height: 100%;
margin: 0px auto;
}
header {
padding-bottom: 8%;
width: 100%;
height: auto;
background-color: #88d9ce;
}
#logo {
text-align: center;
padding-top: 10px;
}
#logo img {
min-width: 100px;
max-width: 15%;
height: auto;
}
#menu {
text-align: center;
margin-left: -25px;
width: 100%;
}
ul {
list-style-type: none;
}
li {
float: left;
width: 17%;
height: auto;
margin-right: 3%;
}
li img {
min-width: 60px;
max-width: 50%;
height: auto;
}<body>
<div id="wrapper">
<header>
<div id="logo">
<img src="http://i61.tinypic.com/13yebnr.jpg" />
</div>
<div id="menu">
<ul>
<li>
<img src="http://i60.tinypic.com/5f0pd4.png" />
</li>
<li>
<img src="http://i59.tinypic.com/2cx6xqs.png" />
</li>
<li>
<img src="http://i58.tinypic.com/veu6o1.png" />
</li>
<li>
<img src="http://i61.tinypic.com/24ebywg.png" />
</li>
<li>
<img src="http://i62.tinypic.com/71r8ut.png" />
</li>
</ul>
</div>
</header>
</div>
</body>