Css positioning and alignment for different divs

.content{
    width: 900px;
}
.shoe_cards1, .shoe_cards2,.featured_pro_heading{
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    align-items: center;
}
.cardbox{
    border: 2px solid rgb(49, 49, 49);
    width: 400px;
    height: 500px;
    background-color: rgb(49, 49, 49);
    border-radius: 30px;
}
.sneaker1, .sneaker3{
    margin: 25px;
}
.featured_pro_heading{
    display: flex;
    justify-content: center;
}
.featured_pro_heading h1{
    font-size: 30px;
    color: black;
    padding: 10px 30px;
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
    box-sizing: border-box;
    border-radius: 25px;
}

.content, .news_bar     {
    display: inline-block;
}
.news_bar{
    position: relative;
    height: 1063px;

    width: 575px;
    border: 1px solid black ;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: black;
}

In the news_bar class, I have adjusted the height to some 1063 pixels. I am a beginner in CSS and I would like to know how I can align all the divs horizontally or vertically even if the divs are from separate sections. Like I have to position a div position: relative;and the add something like `bottom:1013px;. It is hard and I want to know if there is a way to position and align divs. I have used flexbox and inline-block here