Last item (search box) in horizontal list going off the page

[brown136]

The top navigation bar for my website fits on the homepage. The same code applied to other pages has the last item in the horizontal list going out of the right margin. I have tried many, many slight adjustments to the css, but either nothing happens or the problem gets worse.

Here is the current version. I have probably provided more of the code than necessary, but as a relative beginner I was afraid to leave something important out.

https://codepen.io/brown136/pen/MrPVoW

[Beverleyh]

The last list item? Sorry but I don’t know what the “gcse:search” thing is – looks like some form of templating placeholder, but from what system, I couldn’t tell you. You’ll need to provide the HTML markup served in to the browser for whatever that is. You can do that by inspecting the DOM via the developer console – F12 in most browsers.

Also, you might want to consider adding the “toggled” class to a parent element in the CodePen demo so that we can actually see the menu. Presumably that’s being added by JavaScript, but unless you also include working JavaScript to reveal the menu, a manually added class will be the next best thing. Otherwise casual observers will take one look at the demo output and think “can’t see anything, can’t help”.

[brown136]

I have added further code to the CodePen. Sorry for the confusion and thanks for responding. Please let me know if there is any further issue.

https://codepen.io/brown136/pen/MrPVoW

The problem has been that the Google Search box at the top right was going out of the right margin. The interesting thing now that I have used CodePen is that it is showing up all within the margin here. This leads me to believe that maybe there is an issue with one of the images (maybe the logo) pushing it off the page?

Here is a link to what everything looks like with the images included. Here is where you can see the issue I am having with the Google Search box going off the page.

http://yottenvironmentalcom.ipage.com/testing/american-school-food-waste.html

[Beverleyh]

I have added further code to the CodePen.

You should add just the HTML markup for the search, and the CSS corresponding to that. Unfortunately we’re still none the wiser about what elements the “gcse:search” thing refers to.

… the Google Search box at the top right …

So, not the last item at the bottom of the list?

TIP: Reduced demos are what attract helpful responses – that means just enough HTML and CSS to demonstrate the problem. Full page layouts and stylesheets of 1000+ lines tend to put folks off, as do links to websites because we don’t have time to filter through a complete codebase in the developer console. Website links aren’t particularly useful to people browsing the forum on mobile either (like I currently am).

[Paulie_D]

You have significant margin on the li

li {
    margin-bottom: 7.8px;
    margin-left: 100px; /* remove or reduce this */
    max-width: 45em;
}

Use flexbox to distribute the li instead.

Digging deeper…there’s a table with a fixed width of 600px as part of the search form…so that’s messing things up too….it has a load of margin on it too.

table {
    width: 600px; /* in a 340px div! */
    empty-cells: hide;
    margin-left: 100px;
    table-layout: fixed;
}

Inspect your HTML & CSS with Developer Tools that come with your browser (f12)…turn properties on/off and see what happens.

[brown136]

Thanks for taking a look at this. I was adding code from one page to another and was unable to find all of the conflicts. Also, I appreciate the feedback on how to use this forum more effectively.

[Author]

Posts