SharePoint Promoted Links Customize (Bigger with usable ms-promlink-header)

I'm a green bird in SharePint development.<o:p></o:p>

I have a requeirment in a news page like the img below.

(Sorry I cannot contain images.)

As the picture shows, I need a larger promoted links. And I customized the ms-promlink-header but the button doesn't work at all. The nav controls by sharepoint js, but I have no idea with the script reride.

I customize the page with

<style type="text/css">
div.ms-webpart-chrome-title{
	display:none
}
span.ms-promlink-headerNav{
	display:inline-block !important;
}
div.ms-promlink-body{
	height:240px
}
div.ms-tileview-tile-root{
	height: 250px !important;
	width: 400px !important;
}
div.ms-tileview-tile-content{
	height: 240px !important;
	width: 390px !important;
}
div.ms-tileview-tile-detailsBox{
	height: 240px !important;
	width: 390px !important;
}
div.ms-tileview-tile-content > a > div > span {
	height: 240px !important;
	width: 390px !important;
  }

ul.ms-tileview-tile-detailsListMedium{
	height: 240px !important;
	padding: 0;
}
li.ms-tileview-tile-descriptionMedium {
	font-size: 15px;
	line-height: 20px;
}
div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
	padding: 5px;
}
div.ms-tileview-tile-titleTextMediumCollapsed {
    font-size: 18px;
    line-height: 20px;
    min-height: 36px;
    min-width: 97px;
    padding-
    
}

li.ms-tileview-tile-descriptionMedium {
    font-size: 14px;
    line-height: 14px;
    padding: 3px;
}
.ms-tileview-tile-content img {
    width:450px!important;
    height:240px!important;
}
.ms-promlink-button{
	height:240px
}
.ms-promlink-button-inner{
	width:1580px
}
.ms-promlink-root table{
	width:1580px !important;
	
	margin-
	margin-right:33px;
}
.ms-promlink-headerNav{
	
}
.ms-promlink-button-image{
	margin-
}
</style>

<o:p></o:p>