1
基本的に、私は無限に水平に拡張したいメニューバーを上に持っています。さらに、可能であればHTMLスライダーにも同様のプロパティを適用したいと思っています。さらに正しく行われた場合、メニューバーは水平方向に永久に伸び、その下のコンテナも同様にすべきです。最後に、少なくとも私が持っている2つのグレーボックス。私は彼らの灰色の背景も同様に水平に外側に拡大したいが、2つの列の間のセパレータはまだ存在するはずである。マージンを超えてメニューバーを延長するにはどうすればよいですか？
これは私が持っているものです。 
これは私が欲しいものです： 
@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
*{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
body { background-color: #2d2d2d; }
h1 {
color: #1d1d1d; font-family: UbuntuG; font-size: 30;
}
h2 {
color: #1d1d1d; font-family: UbuntuG; font-size: 18;
}
p {
color: #1d1d1d; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
\t color: #1d1d1d;
\t font-family: UbuntuG;
\t font-size: 16;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a {
display: block;
color: #1d1d1d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #33d6ff; color: white;
}
.active {
background-color: #00BFFF; color: white;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #1d1d1d;
}
/*Top full width container*/
.FullWidthContainer{ width:100%}
/*Content Container With max-width:1200px for example*/
.MainContainer{max-width:1200px; width:100%; margin: 0px auto; }
/* content containre divided in left-75% and right-25%}*/
.left{ width:70%; padding:2%; float:left;}
.spacer{ width:2%; padding:2%; float:center}
.right{ width:28%; padding:2%; float:right}
.right img{ width:100%}<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div class="FullWidthContainer" style=""><ul>
\t \t <li><a class="active" href="#home">Home</a></li>
\t \t <li><a href="#about">Who are we?</a></li>
\t \t <li><a href="#contact">Contact</a></li>
\t </ul></div>
\t \t <!-- Start cssSlider.com -->
\t \t <link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
\t \t <!--[if IE]><link rel="stylesheet" href="cssslider_files/csss_engine1/ie.css"><![endif]-->
\t \t <!--[if lte IE 9]><script type="text/javascript" src="cssslider_files/csss_engine1/ie.js"></script><![endif]-->
\t \t <div class="csslider1 autoplay ">
\t \t <input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
\t \t <input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
\t \t <input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
\t \t <input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
\t \t <input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
\t \t <input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
\t \t <input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
\t \t <ul>
\t \t \t <li class="cs_skeleton"><img src="cssslider_files/csss_images1/download.jpg" style="width: 100%;"></li>
\t \t \t <li class="num0 img slide"> <img src="cssslider_files/csss_images1/download.jpg" alt="" title=""></li>
\t \t \t <li class="num1 img slide"> <img src="cssslider_files/csss_images1/download_1.jpg" alt="" title=""></li>
\t \t \t <li class="num2 img slide"> <img src="cssslider_files/csss_images1/download_2.jpg" alt="" title=""></li>
\t \t <!-- </ul><div class="cs_engine"><a href="http://cssslider.com">http://cssslider.com</a> by cssSlider.com v2.1</div> -->
\t \t <div class="cs_description">
\t \t \t <label class="num0"></label>
\t \t \t <label class="num1"></label>
\t \t \t <label class="num2"></label>
\t \t </div>
\t \t <div class="cs_play_pause">
\t \t \t <label class="cs_play" for="cs_play1"><span><i></i><b></b></span></label>
\t \t \t <label class="cs_pause num0" for="cs_pause1_0"><span><i></i><b></b></span></label>
\t \t \t <label class="cs_pause num1" for="cs_pause1_1"><span><i></i><b></b></span></label>
\t \t \t <label class="cs_pause num2" for="cs_pause1_2"><span><i></i><b></b></span></label>
\t \t \t </div>
\t \t <div class="cs_arrowprev">
\t \t \t <label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
\t \t \t <label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
\t \t \t <label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
\t \t </div>
\t \t <div class="cs_arrownext">
\t \t \t <label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
\t \t \t <label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
\t \t \t <label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
\t \t </div>
\t \t <div class="cs_bullets">
\t \t \t <label class="num0" for="cs_slide1_0"> <span class="cs_point"></span>
\t \t \t \t <span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download.jpg" alt="" title=""></span></label>
\t \t \t <label class="num1" for="cs_slide1_1"> <span class="cs_point"></span>
\t \t \t \t <span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_1.jpg" alt="" title=""></span></label>
\t \t \t <label class="num2" for="cs_slide1_2"> <span class="cs_point"></span>
\t \t \t \t <span class="cs_thumb"><img src="cssslider_files/csss_tooltips1/download_2.jpg" alt="" title=""></span></label>
\t \t </div>
\t \t </div>
\t \t <!-- End cssSlider.com -->
\t <br><br>
<div class="FullWidthContainer">
\t \t <div class="MainContainer">
\t \t \t <span style="background-color: gray;" class="left"><center>
\t \t \t \t <iframe height="400px" width="550px" scrolling="yes" frameborder="0" src=https://hellodj.airtime.pro/embed/weekly-program></iframe>
\t \t \t </center></span>
\t \t \t <div style="background-color: gray;" class="right">
\t \t \t \t <iframe id="embed_player" frameborder="0" width="280" height="216" src="https://hellodj.airtime.pro/embed/player?stream=auto"></iframe>
\t \t \t </div>
</div>
</div>
</body>
</html>
メニューはきれいに見えます（ページ幅を埋めるように広がっています）。あなたは意図された外観が何であるべきかのスクリーンショットを投稿できますか？ – dommmm
質問に画像を追加しました。 – Apocolyptic