html - CSS - Positioning one element around another. To float around each other -

i'm building events site , working on index page styling. plan have site logo , sign-in / create event link sat central @ top of page , each event represented box shape image date/title sat on top of link through more event details. i've pretty got done except can't image links float/position around logo. i've attached screenshot below illustrate how looks. want event images filter along side of logo rather how looks blank space on either side of logo.

here's code -

index.html.erb

    <div class="category">         <ul>             <li>                 <a href="#">categories</a>                   <ul>                         <% category.all.each |category| %>                                 <li><a href="#"><%= link_to category.name, events_path(category: category.name) %></a></li>                             <% end %>                         <!-- code loop above creates category links home page -->                 </ul>             </li>         </ul>     </div>   </nav>        <div id="logosignin">      <% if user_signed_in? %>                 <%= image_tag('mamaknowslogo.jpg') %>                 <li><%= link_to 'create event', new_event_path %></li>                 <li><%= link_to 'profile', user_path(current_user) %></li>      <% else %>                 <%= image_tag('mamaknowslogo.jpg') %>                 <li><%= link_to 'sign in', new_user_session_path %></li>     <% end %> </div>    <div class="container"> <div class="row">     <div class="col-md-12">         <ul>                  <% @events.each |event| %>             <li class="events">                      <%= link_to (image_tag event.image.url), event, id: "image" %>                 <div class="text">                       <h2><%= link_to event.title, event %></h2>                     <h3><%= link_to event.date.strftime('%a, %d %b %y'), event %></h3>             </li>                        <% end %>                 </div>          </ul>                                </div> </div>   

and relevant css.

events.css.scss -

div.container { width: 100%;  }       .col-md-12 {   width: 100%;   }      li.events {  width: 350px;  height: 350px;  float: left; margin: 20px; list-style-type: none; position: relative;   }  li.events img {  width: 100%;  height: 100%;  border-radius: 25px;     }     #logosignin img { width: 250px; height: auto; margin: 0 auto;    }   #logosignin { width: 250px; height: 350px; margin: 0 auto;    }   #logosignin { text-decoration: none; color: #ffffff; padding: 7px; border-radius: 15px; background-color: #ff69b4;      }   #eventnav { height: 75px;  }  #logosignin li { bottom: 30px;  list-style: none; display: block; margin: 0 auto; text-align: center; } 

do need set div logo within div events? assistance appreciated.

well create new container events, in new row, within div spreads across 12 columns on screen sizes.

you can have more details here, rows in bootstrap (i assume use bootstrap) used create horizontal groups of columns. inside row, can create elements of different widths using col-*(the container divided in 12 columns).

what can nest logosignin inside row div , play col-*to achieve want on screens. might want check how clearfixcolumns higher others on small screens (see here).