html - problems with webpage layout -

मेरे पास यह पृष्ठ है

  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; title & gt; Pagina & lt; / title & gt; & Lt; link href = "estilo_duda.css" rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" / & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div वर्ग = "कंटेनर" & gt; & Lt; div id = "encabezado" & gt; Encabezado & lt; / div & gt; & Lt; div id = "menu" & gt; मेनू पर लास ऑप्शन & lt; / div & gt; & Lt; div id = "प्रिंसिपल" & gt; प्रिंसिपल प्रिंसिपल प्रिंसिपल & lt; / div & gt; & Lt; div id = "publicidad" & gt; पब्लिसिड & lt; / div & gt; & Lt; div id = "piedepagina" & gt; पाई डी पेज & lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;   
 यह सीएसएस  
 । कंटेनर {चौड़ाई: ऑटो; ऊंचाई: ऑटो; मार्जिन: 0 ऑटो; } # एन्कबेसज़ेस {फ़ॉन्ट-परिवार: गैरामंड, एरियल; फ़ॉन्ट-आकार: 40px; पाठ संरेखित करें: केंद्र; पैडिंग-टॉप: 25px; सफ़ेद रंग; चौड़ाई: 987 पीएक्स; / * अनू * * / ऊंचाई: 100 पिक्सेल; / * अल्टो * / पृष्ठभूमि रंग: # 000000; } # मेन्यू {font-family: Arial; फ़ॉन्ट-आकार: 40px; पाठ संरेखित करें: केंद्र; पृष्ठभूमि रंग: # 000000; सफ़ेद रंग; चौड़ाई: 200px; / * अंको * / ऊंचाई: 1720 पिक्सेल; / * अल्टो * / फ्लोट: बाएं; } # प्रमुख [font-family: Arial; फ़ॉन्ट-आकार: 20px; पृष्ठभूमि रंग: # 000000; चौड़ाई: 650 पीएक्स; / * अंको * / ऊंचाई: 1720 पिक्सेल; / * ऑल्टो * / रंग: # 3 एफसी 6565; बाईंओर तैरना; पैडिंग-बाएं: 10px; } # पब्लिकिडाड {फ़ॉन्ट-परिवार: एरियल; पृष्ठभूमि रंग: # 000000; चौड़ाई: 127px; / * अंको * / ऊंचाई: 1720 पिक्सेल; / * अल्टो * / पाठ-पंक्ति: केंद्र; रंग: पीला; बाईंओर तैरना; } # पेडिपैगिना {फ़ॉन्ट-परिवार: गरमोंड; फ़ॉन्ट-आकार: 20px; पाठ संरेखित करें: केंद्र; ऊर्ध्वाधर-पंक्ति: बीच; नारंगी रंग; चौड़ाई: 987 पीएक्स; / * अनू * * / ऊंचाई: 50 पिक्सेल; / * अल्टो * / पृष्ठभूमि रंग: # 000000; पैडिंग-टॉप: 25px; दोनों को साफ करो; }   
 मेरे 14 इंच की मॉनीटर पर लेकिन यह अच्छा दिखता है कि वाइडस्क्रीन मॉनीटर खराब दिखता है, क्योंकि यह सब सही संरेखित सामग्री दिखाई देता है  
  
 किसी को भी पता है कि कैसे इसे ठीक करने के लिए?   
 
 
 बस अपने सीएसएस फाइल में निम्नलिखित कोड की जगह; अपनी HTML फ़ाइल (मेनू) में ब्रेक टैग शामिल करें  <पूर्व>  शरीर {पृष्ठभूमि रंग: # 000000; फ़ॉन्ट-परिवार: जॉर्जिया, बिना-सेरिफ़; रंग: # 333; मार्जिन: 0; गद्दी: 0; }। कंटेनर {चौड़ाई: 1100px; मार्जिन: 0 ऑटो; } # एन्कबेसज़ेस {फ़ॉन्ट-परिवार: गैरामंड, एरियल; फ़ॉन्ट-आकार: 40px; पाठ संरेखित करें: केंद्र; पैडिंग-टॉप: 25px; सफ़ेद रंग; चौड़ाई: 987 पीएक्स; ऊंचाई: 100 पिक्सेल; पृष्ठभूमि रंग: # 000000; } # मेन्यू {font-family: Arial; फ़ॉन्ट-आकार: 30px; पाठ संरेखित करें: केंद्र; पृष्ठभूमि रंग: # 000000; सफ़ेद रंग; चौड़ाई: 130px; ऊंचाई: 500 पीएक्स; बाईंओर तैरना; } # प्रमुख [font-family: Arial; फ़ॉन्ट-आकार: 20px; पृष्ठभूमि रंग: # 000000; चौड़ाई: 750 पिक्सेल; ऊंचाई: 500 पीएक्स; रंग: # 3FC665; बाईंओर तैरना; पैडिंग-बाएं: 100px; } # पब्लिकिडाड {फ़ॉन्ट-परिवार: एरियल; पृष्ठभूमि रंग: # 000000; चौड़ाई: 100px; ऊंचाई: 500 पीएक्स; पाठ संरेखित करें: केंद्र; रंग: पीला; बाईंओर तैरना; } # पेडिपैगिना {फ़ॉन्ट-परिवार: गरमोंड; फ़ॉन्ट-आकार: 20px; पाठ संरेखित करें: केंद्र; ऊर्ध्वाधर-पंक्ति: बीच; नारंगी रंग; चौड़ाई: 987 पीएक्स; ऊंचाई: 50 पीएक्स; पृष्ठभूमि रंग: # 000000; पैडिंग-टॉप: 25px; दोनों को साफ करो; }   
 परिणाम: