要素間の空白を削除するにはどうしたらよいでしょうか。

お世話になります。
HTML及びCSSを用いて、仮想のお店のホームページを作成し、CSSの勉強中です。

ヘッダーの中の、要素と要素の間にある空白を詰めることが出来ず、質問させて頂きました。
（赤いマーカーの下線部分が該当箇所です。）

実現したいこと

ヘッダーの、「open21:00close21:00」の要素と、その右隣の「珈琲の茶色いマーク」の間の空白を丸々なくして、すぐ隣同士に並べたいです。

現状のソースコード

該当の要素のコード以外に原因があるかも分からないので、ヘッダーのコードを記載します。
「open21:00close21:00」の要素が<div class="op">で、
「珈琲の茶色いマーク」が<div class="mark">です。

HTML
1<header>
2 <div class="navi_box"><!--ナビの箱-->
3
4   <h1><a href="#"><img src="img/rogo.png" class="logo" alt="ロゴ" width="743" height="702"></a></h1>
5
6  <div class="nav_box"><!--ナブ-->
7       <nav>
8		   <link rel="stylesheet" href="https://use.typekit.net/dkn8lew.css">
9           <ul>
10             <li><a href="#">HOME</a></li>
11             <li><a href="#">MENU</a></li>
12             <li><a href="#">CONCEPT</a></li>
13             <li><a href="#">PLANTS</a></li>
14             <li><a href="#">ACCESS</a></li>
15           </ul>       
16       </nav>
17  </div><!--ナブ閉じ-->
18
19  <div class="box3"><!--box3-->
20    
21  　   <div class="op"><!--営業時間の箱-->
22          <p>open 9:00<br>close 21:00</p>
23  　   </div> <!--営業時間の閉じ-->  
24　　　　　<div class="mark"><!--マークの箱-->
25          <a href="#"><img src="img/cafemark.png" class="mark" alt="アクセスマーク" width="150" height="150"></a> 
26          </div> <!--マークの閉じ-->
27  
28    </div> <!--box3の閉じ-->   
29    
30  </div><!--ナビの箱の閉じ-->
31
32</header>
33

CSSのソースコード

こちらがヘッダーのCSSコードです。

<div class="nav_box">を作り、その中に「ｈ1」及び"nav_box"と"box3"の２つのdiv classが入っています。「box3」のdivには質問の該当箇所の"op（営業時間）"と"mark（珈琲マーク）"のdivが入っています。

CSS
1header{
2	width:1000px;
3	height:666px;
4	margin:0 auto;
5	justify-content:space-around;
6	background-image:url(../img/tennnai.jpg);
7}
8
9.navi_box{
10	width:1000px;
11	height:87px;
12	background-color:rgba(150,65,14,0.90);
13	display:flex;
14	align-items: center;
15}
16
17h1 img{
18	width:90px;
19	height:90px;
20}
21
22.nav_box ul{
23	color: whitesmoke;
24	font-size: 13px;
25	width:600px;
26	display:flex;
27	justify-content:space-around;
28font-family: adorn-engraved-expanded, sans-serif;
29font-weight: 400;
30font-style: normal;
31}
32
33a:link{
34	color:#FFF;
35}
36a:visited{
37	color:#FFF;
38}
39a:hover{
40	color:#F63;
41}
42
43.op{
44	padding-top: 13px;
45	font-family: Georgia, "Times New Roman", Times, "serif";
46}
47
48.mark{
49	width:60px;
50	height:60px;
51}
52
53.box3{
54	display:flex;		
55}
56