Проблемы с компоновкой GWT

У меня такая структура макета: 1) Сначала устанавливает SimpleLayoutPanel main (зеленая рамка) 2) Я хотел бы добавить DockLayoutPanel child к main (красная граница; поля 25 пикселей)

Я реализовал это, но результат, показанный во вложении (.jpg), для меня странный. Итак, все красные (верхняя, левая, правая, нижняя) границы дочернего должны быть внутри основной , но дочерняя панель сдвигается. Как правильно реализовать эту логику? У меня более сложная структура пользовательского интерфейса с 3-4 уровнями. И я тоже не работаю без полей.

А вот код и css:

SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);

//CSS    
.moduleBody {
/*width: 100%;
  height: 100%;*/
  margin:  0px;
  width: 100%;
  height: 100%;
  border: 3px solid red;
}

.mainModulePanel {
/*margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;*/
  border: 3px solid green;
}