Beiträge von Sailor56

Warum fügst du das Bild nicht als Letztes im <header> ein... ?
Ansonsten, ohne Link zur Seite ist Hilfe kaum möglich.

Bei 1und1 läuft PHP 5.6 noch unter 'PHP community support' (bis 12/2018) und der ist kostenlos. Ein Wechsel auf PHP 7 / 7.1 / 7.2 ist mit einem Mausklick zu erledigen.

Hmmm... da bin ich leider auch etwas ratlos :(! Kann alles mögliche sein und ist von außen schwer zu diagnostizieren!
Aber vielleicht ist hier im Forum ja jemand etwas vertrauter mit deinem Theme und kann dir weiter helfen.

Sieht doch jetzt aber gut aus.... hast du den (Java)Script rausgenommen?

Du hast deinen Hinweis 2 mal eingefügt!
Einmal im Quellcode selbst in dem <div id="mein_hinweis"....., erkennbar in der Bildschirmanzeige an der roten Rahmenlinie links vom Text. Dieser Hinweis ist CSS gesteuert und funktioniert, wie ich es beobachten kann genau so, wie er soll.
Und dann hast du zum Zweiten einen JavaScript eingebaut

<script id="x-customizer-js">
      jQuery(document).ready(function($){
    $('<div><h3>Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!</h3><img class="aligncenter" src="http://www.roadeagle-arnsdorf.de/meute/wp-content/uploads/Smartphone-drehen.jpg" alt="bitte das Gerät auf quer drehen" width="304" height="268"></div>').insertBefore('.home h2');
});    </script>

mit dem der Warnhinweis ebenfalls eingeblendet wird. Ich kann hier jedoch nicht erkennen, wie und ob der wieder ausgeblendet wird, wenn das Disaply auf 'Landscape' steht.

Könnte daran liegen, dass du zur Kodierung der * in deinem ::before die Oktalnotation \52 nutzt. Versuche doch mal das in das ISO Format zu bringen...

.star-rating span::before {
content: "\002a\002a\002a\002a\002a";
.....
}

Ob ich einen Lösungsvorschlag habe, weiß ich nicht - aber ich kann sehen, woran das liegt!
Deine Seite hat auf der rechten Seite einen Sidebar (#secondary), der jedoch keinen Inhalt hat, trotzdem natürlich dem ihm zugewiesenen Platz beanspucht.
Der Inhalt auf der linken Seite steckt in einem Div (#primary), der mit float: left formtiert ist und gar nicht anders kann, als linksbündig zu stehen.
Was du versuchen könntest:
1. Ausblenden des Sidebars

#secondary {
display: none;
}

2. dem Kontent das float abgewöhnen, zentrieren und die Breite nach deinen Wünschen einzustellen

#primary {
float: none;
margin: 0px auto;
width: 800px;
max-width: 100%;
}

Und das ganze solltest du im 'zusätzlichen CSS' durchführen ( vom Dashboard -> Design -> Customizer -> zusätzliches CSS), damit dir das nächste Update nicht wieder alles zerschießt.

https://www.youtube.com/watch?v=KJpZT5IkOpc

Ich verstehe nicht so genau, was du mit .page-id-194 .moz-widget-list-adjust #secondary erreichen willst?
Du hast mit #secondary (also eine ID, die nur ein einiges mal auf dieser Seite vorkommt) einen zuverlässigen Sektor - und mit der .page-id-194 einen (hoffentlich) zuverlässigen Selektor, der nur auf der Startseite wirkt... was willst du mehr?
Außerdem - ist #secondary ein Kindelement von .moz-widget-list-adjust??? Wenn nicht, dann kann das nicht funktionieren!

der . steht für eine CSS Klasse - diese kann beliebig oft auf der Seite verwendet werden, um eben ein Element so zu formatieren.
Das # steht für eine ID und darf nur ein einziges mal auf der Seite verwendet werden... es ist ein einmaliges Identifikationsmerkmal für genau dieses Element!

Wenn es über den Inspektor klappt, dann klappt das auch mit CSS im 'zusätzlichen CSS' - kann nur sein, dass deine Page ID nicht stimmt! Wo hast du die gefunden? Die sollte im body-Tag der Sartseite zu finden sein.

Das solltest du könne, wenn du eine eindeutige Page ID identifizieren kannst, dann kannst du die auch nutzen und die Elemente auf dieser Seite unabhängig formatieren.
Einfach im CSS die Page ID vor den Element Selektor schreiben:

#PageID #secondary { deine Formatierungen ;}

.footer-middle a {
color: #ddd;
}
.footer-middle a:hover {
color: #F7931F;
}

in das zusätzliche CSS einfügen. (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)
https://www.youtube.com/watch?v=KJpZT5IkOpc

So ganz kann ich dein Problem nicht durchschauen.
Wenn du deinen Code in das zusätzliche CSS hineinschreibst (auch wenn ich mich wiederhole... vom Dashboard -> Design -> Customizer - zusätzliches CSS ... und als kleine Hilfe vielleicht noch dieses Video https://www.youtube.com/watch?v=KJpZT5IkOpc ), dann werden alle vorherigen Formatierungen überschrieben und es gilt die Letzte Anweisung - die im zusätzlichen CSS.
Eventuell kann es notwendig sein die Anweisung noch durch !important zu markieren:

#main {
padding-left: 10px !important;
padding-right: 10px !important;
}

Aber das sollte, soweit ich das an deinem Code sehen kann, nicht notwendig sein!

Der Selektor stimmt ja auch nicht! Teste mal...

.mtmegamenu .menu-item-114 a {
color: red;
}

Welchen Selektor nutzt du, um das Padding einzustellen?
Wo fügst du deine CSS Formatierung ein.

Mit

#main {
padding-left: 10px;
padding-right: 10px;
}

im zusätzlichen CSS (vom Dashboard -> Design -> Custumizer -> zusätzliches CSS) sollte das eigentlich funktionieren.

Bist du sicher, dass #secondary der richtige Selektor ist?
Wenn ja, versuche es mit ...

#secondary {display: none !important;}

Wenn du den Link nicht auf dem selben Wege wieder entfernen kannst, wie er in den Code hinein gekommen ist, dann bleibt die noch die Möglichkeit den Link mit CSS auszublenden.
Gebe dazu im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) folgendes ein:

.bd-container-inner .bd-logo-2 {
display: none;
}

Eine kleine Anleitung, wie das geht, findest du hier -> https://www.youtube.com/watch?v=KJpZT5IkOpc

Da sich deine Inputfelder jeweils in einem div class="form-table-cell" befinden, könntest du versuchen dieser Klasse jeweils etwas Platz nach links und rechts zu verschaffen.

.form-table-cell {
margin-left: 3px;
margin-right: 3px;
}

Im zusätzlichen CSS eingetragen, sollte das einen 6px breiten Spalt zwischen den div's erzeugen.

Das heißt eigentlich, dass deine 150x150 Pixel von sichtbarem Bild gefüllt sein sollte! Den weißen Rand auf weißem Hintergrund sieht man ja nicht und genau das führt zu der optischen Täuschung, die du in deinem Beitrag hinterfragt hast!

Kommt darauf an, welchen Browser du benutzt. Bei den meisten gängigen Browser ruft man den Inspektor durch Rechtsklick auf das fragliche Element und anschließende Auswahl von 'Element untersuchen' auf. Dann sollte sich ein Tool öffnen, mit dem du den CSS-Geheimnissen deiner Seite auf den Grund gehen kannst. OK.. etwas Übung ist schon notwendig, aber im Prinzip ist das so schwer nicht!