I'm facing an issue with my div element. The styling properties margin-left:auto and margin-right:auto are pushing another div out of the navbar.
How can I keep both div elements within the navbar? Here is my code:
body, html {
margin:0;
padding:0;
}
#navbar {
width:100%;
height:50px;
background-color:#000000;
}
#div1 {
width:300px;
height:50px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
}
#div2 {
width:100px;
height:50px;
float:left;
background-color:#00FF00;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="navbar">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>check out this codepen example
I've been ignoring this problem for a while, but now I really need to find a solution. Any help would be greatly appreciated :)