OzzC OzzC - 1 month ago 3
CSS Question

Strange issue giving margin right to my menu items

I'm trying to turn a desktop design to a tablet one.

And I'm doing now a media query for 768px, and so I have my menu with 768px, and I want to give margin-left and margin-right to my menu items.

And when I give margin-left, everything works fine, but margin-right its not working, and my last menu item that is my search input appears outside my 768px.

Can someone please help me understanding what is happening? I've been at it for a long time and I didn't find the problem!

What I have so far:

enter image description here

My jsfiddle with the problem: http://jsfiddle.net/ra3zc/3/

My html:

<section id="menu-container">
<nav id="menu">
<li><a href="#">Link 1</a>
<li style="border-top:none;"><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 2</a>
<li style="border-top:none;"><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 3</a>
<li style="border-top:none;"><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li id="search_list">
<form id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
<button type="submit"><i class="fa fa-search"></i></button>

My css is a bit long so I’m not putting it here.

#menu ul 
    list-style-type: none;
    width: 768px;   
    margin-left: 5px;

your #menu ul should not be 768px because it occupied all the #menu range, try to change it to 500px or less.