使用CSS時，我們經常會遇到一個問題，就是手冊（reference）的右側會有一定的空白，尤其在寬屏顯示器上，這樣會浪費大量的屏幕空間。那么，我們應該如何解決這個問題呢？

其實，要消除CSS手冊右邊的空白，有很多種方法，下面我們介紹其中兩種較為常用的方式。

/* 方法一：利用CSS3中的calc()函數 */
.reference {
width: calc(100% - 200px); /* 將手冊寬度減去200像素的目錄欄寬度 */
float: left;
}
/* 方法二：使用flex布局 */
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.reference {
flex: 1; /* 分配剩余空間 */
}

使用方法一時，我們利用了CSS3中的calc()函數，計算出手冊的寬度，將其減去目錄欄的寬度，以此來消除右側空白。而方法二則是利用了flex布局，將容器分為兩個區域，一部分是固定寬度的目錄欄，另一部分則使用flex:1來動態分配剩余空間，實現消除空白的目的。

當然，除了上述兩種方法外，還可以使用CSS的偽元素、絕對定位等屬性處理右邊空白的問題。不同的方法適用于不同的場景，我們需要根據具體情況選擇最合適的方式來實現。