Spacing layouts in View

HI all,

I have an issue whereby - If i add a menu bar to my view; it interferes with the layout of the components below. I have to set spacing and margins but with no success. Any ideas about what i can do? I am using Vaadin 8.9.0. My code is below. Thanks!

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final HorizontalLayout layout = new HorizontalLayout();

        Label title = new Label(("Menu"));
        title.addStyleName(ValoTheme.MENU_TITLE);

//        Button login = new Button("Home", e -> getNavigator().navigateTo("login"));
//        login.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        Button about = new Button("About Us", e -> getNavigator().navigateTo("about"));
        about.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        Button partners = new Button("Partners", e -> getNavigator().navigateTo("partners"));
        partners.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        Button faqs = new Button("FAQs", e -> getNavigator().navigateTo("faqs"));
        faqs.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        Button resources = new Button("Resources", e -> getNavigator().navigateTo("resources"));
        resources.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        Button contact = new Button("Contact", e -> getNavigator().navigateTo("contact"));
        contact.addStyleNames(ValoTheme.BUTTON_LINK, ValoTheme.MENU_ITEM);
        HorizontalLayout menu = new HorizontalLayout(about, partners, faqs, resources, contact);
        menu.addStyleName(ValoTheme.MENUBAR_SMALL);
//        menu.setHeight("10px");
        menu.setWidth("1200px");
        menu.setMargin(true);
        menu.setSpacing(true);

   
        TextField fname = new TextField("FIRST NAME");
        TextField lname = new TextField("LAST NAME");
        HorizontalLayout names = new HorizontalLayout(fname, lname);

        TextField zip = new TextField("ZIP CODE");
        TextField phone = new TextField("PHONE");
        HorizontalLayout demog1 = new HorizontalLayout(zip, phone);


        RadioButtonGroup<String>gender = new RadioButtonGroup<>("Gender");
        gender.setItems("Female", "Male", "Non-Binary");
        HorizontalLayout demog2 = new HorizontalLayout(gender);

        TextField email = new TextField("EMAIL");
        DateField date = new DateField("Date of Birth");
        HorizontalLayout demog3 = new HorizontalLayout(email, date);

        Button join = new Button("Join Now");
        join.addStyleName("friendly");
        Button login = new Button("Login");
        login.addStyleNames("primary");

        HorizontalLayout user = new HorizontalLayout(join,login);
        VerticalLayout credentials = new VerticalLayout(names, demog1, demog2, demog3, user);
        credentials.setMargin(true);
        credentials.setSpacing(true);


        //Embed the HiOH video in a browser frame
        BrowserFrame browser = new BrowserFrame("", new ExternalResource("https://ooc.hioh.org/oocwebdesktop/assets/video/hiohVideo.mp4"));
        browser.setWidth("500px");
        browser.setHeight("300px");

        layout.addComponents(menu, credentials, browser);
        layout.setHeight("1200");
        layout.setWidth("1200");
        layout.setMargin(true);
        layout.setComponentAlignment(menu, Alignment.TOP_CENTER);
        layout.setComponentAlignment(credentials, Alignment.MIDDLE_CENTER);
        layout.setComponentAlignment(browser, Alignment.MIDDLE_CENTER);

        setContent(layout);

    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Have you checked this training video about layouting with Vaadin 8 https://vaadin.com/training/courses/layouting-basics ?